阅读 334

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 参数优先级更高),包括 modeentry 等等,然后跳出 processOptions 继续执行,根据 cli 参数有没有 watch 相关而做一些处理。

统计数据 stats 配置

processOptions 执行完后,回到 cli.js 文件执行同名方法 processOptions ,传入了融合了后的配置 options,然后对配置中的统计信息(options.stats)进行了处理。

webpack.js

最后执行:

const webpack = require('webpack');
//...
try {
  compiler = webpack(options);
} catch (err) {
  //...
}
复制代码

这里引入了webpacknode_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 下。