Webpack Source Analysis--Configuration debugging environment

Whether it is reading Webpack source code, or writing Webpack plugin and loader, it is necessary to configure the debugging environment. Weabpack running environment is NODEJS, debugging Webpack is debugging Nodejs program. The Ides we use, such as Eclipse and Webstorm, support Nodejs debugging. This article takes Eclipse (version:oxygen.1a Release (4.7.1a)) as an example to explain.

In this example, we use Webpack <entry> [<entry>] <output> This usage, the project specific directory structure is as follows:

--index.html

--index.js

--hello.js

Content in index.html:

Content in Index.js:

Content in Hello.js:

Build command: Webpack./index.js bundle2.js

First step, create a new Debug configuration item

Second step, fill in the configuration item

Name :names of Debug configuration items

The file under the Main tab: the entry for the program. Webpack's entry file is the webpack.js in the bin directory

Then click on the Arguments tab to configure

Program Arguments:

The example in this article is to execute the webpack./index.js bundle2.js command, so the parameters are configured in the program variable programs arguments:./index.js bundle2.js

If you are configuring directly using the Webpack.config.js configuration file, and the command used on the command line is Webpack, this situation can be done without configuring program Arguments

Working Directory:

directory where the program is being debugged

Step three, set breakpoint execution

The configuration of the other Ides is similar.

Webpack Source Analysis--Configuration debugging environment