webpack源碼分析——配置調試環境

不管是閱讀webpack源碼，仍是編寫webpack的plugin和loader,配置調試環境都是頗有必要的。weabpack的運行環境是nodejs，調試webpack就是調試nodejs程序。咱們平時使用的IDE如eclipse、webstorm都支持nodejs的調試。本文以eclipse（Version: Oxygen.1a Release (4.7.1a)）爲例，進行講解。

在這個例子裏面，咱們使用webpack <entry> [<entry>] <output>這種用法，工程具體目錄結構以下：

--index.html

--index.js

--hello.js

index.html中的內容：

index.js中的內容：

 

hello.js中的內容：

 

構建命令：webpack ./index.js bundle2.js

第一步、新建一個debug配置項

 

第二步、填寫配置項

 

Name：debug配置項的名稱

Main選項卡下的File：程序的入口文件。webpack的入口文件是bin目錄下的webpack.js

而後點開Arguments選項卡，進行配置 

 

Program Arguments： 

本文中的例子是要執行 webpack ./index.js bundle2.js命令，故在程序變量Program Arguments一項中配置了參數：./index.js bundle2.js

若是是直接使用webpack.config.js配置文件進行配置，而且在命令行中使用的命令是webpack，這種狀況能夠不用配置Program Arguments

Working Directory:

被調試程序所在目錄

第三步、設置斷點執行

 其餘IDE的配置也差很少。