源码分析（二）：配置初始化

通过在 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 是系统默认的配置、cli 配置、配置文件配置三种融合的结果，此时项目配置与默认配置都已处理完毕，进入编译前的准备。

本章小结

1. webpack 先选择了 cli 后，配置了 yargs 相关信息；
2. 通过 yarg 解析了 cli 相关参数后，与读取到的配置文件的配置相融合；
3. 统计数据 stats 配置后，执行方法 webpack，融合了项目配置与默认配置，最终得到 options 挂载到变量 compiler 下。