webpack 4 源碼主流程分析（二）：配置初始化

原文首發於 blog.flqin.com。若有錯誤，請聯繫筆者。分析碼字不易，轉載請代表出處，謝謝！

經過在 cli 執行命令 webpack 開始，以 development 模式爲例，暫時忽略支線劇情（錯誤響應，緩存等等），只分析探索 webpack 的打包主流程。

選擇 cli

根據 npm 的規則，cli 執行 webpack 後，就會去執行 node_modules/.bin/webpack 文件即 node_modules/webpack/bin/webpack.js。因此這裏咱們的 npm scripts 中的 debug 直接調試的 node_modules/.bin/webpack 的代碼。 代碼中經過:

require.resolve(packageName);
複製代碼

判斷是否安裝了包 webpack-cli 或者 webpack-command，經過安裝的數量處理後，執行：

require(path.resolve(path.dirname(pkgPath), pkg.bin[installedClis[0].binName]));
複製代碼

即執行 node_modules/webpack-cli/bin/cli.js，

webpack-cli

該文件爲一個自執行函數，import-local 包用於優先選用本地包，v8-compile-cache 包用於 v8 緩存優化。

配置 yargs

接下來配置了 yargs的幫助等信息：

require("./config/config-yargs")(yargs)；
複製代碼

在文件 node_modules/webpack-cli/bin/config/config-yargs.js 裏能夠查閱具體的配置內容。

而後執行：

yargs.parse(process.argv.slice(2), (err, argv, output) => {
  //...
});
複製代碼

在 yargs.parse 的回調裏執行：

options = require('./utils/convert-argv')(argv);
複製代碼

合併 cli 參數與項目配置參數

convert-argv.js 主要作了對 cli 所傳的參數與項目配置進行融合，並處理部分參數，最終獲得一個 options。

先處理了部分特定參數後（可能會有多個項目配置），而後經過一系列（findup,interpret）的處理，獲得配置文件的路徑值: /nice/wpDemo/webpack.config.js。而後讀取 webpack.config.js 這個文件後，執行：

processConfiguredOptions(options[0]);
複製代碼

方法裏先對 options 的類型進行了驗證：

validateOptions(options);
複製代碼

驗證無誤後，對項目配置文件進行了一系列的判斷，包括是不是多數組，函數等等。最後執行：

processOptions(options);
複製代碼

在該方法裏，經過 ifArg 對融合了 cli 參數配置和項目配置（cli 參數優先級更高），包括 mode，entry 等等，而後跳出 processOptions 繼續執行，根據 cli 參數有沒有 watch 相關而作一些處理。

統計數據 stats 配置

processOptions 執行完後，回到 cli.js 文件執行同名方法 processOptions ，傳入了融合了後的配置 options，而後對配置中的統計信息（options.stats）進行了處理。

webpack.js

最後執行：

const webpack = require('webpack');
//...
try {
  compiler = webpack(options);
} catch (err) {
  //...
}
複製代碼

這裏引入了webpack（node_modules/webpack/lib/webpack.js）, webpack 掛載了不少內置的插件，如 BannerPlugin 等等, 而後執行 webpack。

先經過 ajv 驗證配置的每一項是否合法：

const webpackOptionsValidationErrors = validateSchema(webpackOptionsSchema, options);
複製代碼

而後判斷若是 options 是數組則執行多個webpack(options)，而後執行：

options = new WebpackOptionsDefaulter().process(options);
複製代碼

該方法在文件 WebpackOptionsDefaulter.js 裏，初始化默認的 config 配置後，而後經過 WebpackOptionsDefaulter 的原始類 OptionsDefaulter 上的 process 方法 merge 了項目配置。而後執行：

compiler = new Compiler(options.context); // options.context爲當前項目絕對路徑
複製代碼

options 是系統默認的配置與項目自定義配置兩種融合的結果，此時項目配置與默認配置都已處理完畢，進入編譯前的準備。

本章小結

1. webpack 先選擇了 cli 後，配置了 yargs 相關信息；
2. 經過 yarg 解析了 cli 相關參數後，與讀取到的配置文件的配置相融合；
3. 統計數據 stats 配置後，執行方法 webpack，融合了項目配置與默認配置，最終獲得 options 掛載到變量 compiler 下。