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

IT路上狂奔的蜗牛

于 2023-03-09 22:58:29 发布

阅读量169

点赞数

分类专栏： webpack源码系列文章标签： webpack 前端 Powered by 金山文档

原文链接：https://juejin.cn/post/6844904047221145608

版权

webpack源码系列专栏收录该内容

9 篇文章 0 订阅

订阅专栏

通过在 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 = newWebpackOptionsDefaulter().process(options);
复制代码

与合项目默认参数合并

该方法在文件 WebpackOptionsDefaulter.js 里，初始化默认的 config 配置后，然后通过 WebpackOptionsDefaulter 的原始类 OptionsDefaulter 上的 process 方法 merge 了项目配置。然后执行：

compiler = newCompiler(options.context); // options.context为当前项目绝对路径复制代码

options 是系统默认的配置、cli 配置、配置文件配置三种融合的结果，此时项目配置与默认配置都已处理完毕，进入编译前的准备。

本章小结

webpack 先选择了 cli 后，配置了 yargs 相关信息；

通过 yarg 解析了 cli 相关参数后，与读取到的配置文件的配置相融合；

统计数据 stats 配置后，执行方法 webpack，融合了项目配置与默认配置，最终得到 options 挂载到变量 compiler 下。

作者：Korey

链接：https://juejin.cn/post/6844904047221145608

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。