前言：我当前调试的
webapck版本是5.58.1，不知道怎么开始调试的看过来->调试方法。
准备工作：
- 准备一个正常的webpack项目，很简单的就可以
- 新建webpack.config.js配置文件，随意配置
- 调试准备见上面前言内容中的链接
接下来，进入正文...
首先执行webpack命令，执行的是node_modules.bin\webpack./node_modules/.bin/webpack这个shell脚本，这个脚本去调用./node_modules/webpack/bin/webpack.js并追加输入参数，生成最终的配置文件。
- 1、执行webpack main.js进入调试界面->入口进入到
node_modules\webpack\lib\webpack.js这个文件中去（主要是做一些准备工作，依赖于webpack-cli&webpack-command，在此判断是否安装webpack-cli）
const path = require("path");
const pkgPath = require.resolve(`${installedClis[0].package}/package.json`);
// eslint-disable-next-line node/no-missing-require
const pkg = require(pkgPath);
// eslint-disable-next-line node/no-missing-require
//引入webpack-cli模块->接下来进入到webpack-cli/cli.js文件中
require(path.resolve(
path.dirname(pkgPath),
pkg.bin[installedClis[0].binName]
));
- 2、
node_modules\webpack-cli\bin\cli.js。在cli中创建一个webpack，将options传入，遍历配置项中的Plugins等，最后执行compiler.run(callback)方法
//自定义的配置文件内容
const firstOptions = [].concat(options)[0];
//命令行传参内容
let outputOptions = options.stats;
//最终会合并配置项，将所有的配置项合并到options中
//引入webpack->用来创建一个compiler
const webpack = require("webpack");
//将所有的配置项传入
compiler = webpack(options);
- 3、
node_modules\webpack\lib\webpack.js中
let compiler;
compiler = new Compiler(options.context);
compiler.options = options;
//盲猜是对插件的操作-遍历所有的插件
if (options.plugins && Array.isArray(options.plugins)) {
for (const plugin of options.plugins) {
if (typeof plugin === "function") {
plugin.call(compiler, compiler);
} else {
//讲plugin的this绑定到compiler上
plugin.apply(compiler);
}
}
}
//最后执行compiler.run方法
compiler.run(callback);
结论：webpack打包，其实就是使用webpack函数来接收config，然后调用run方法。
最后证明一下确实是走了这么一个流程：
在刚才的项目下新建一个run.js文件，运行node run.js会打印出来11111
//引入webpack和配置信息
const webpack = require("webpack");
const config = require("./webpack.config");
//调用webpack方法，传入配置信息
const compiler = webpack(config);
//调用compiler.run方法
compiler.run((err, stats) => {
console.log(11111);
});
image-20220104222023493.png
想直接扒代码的同学->git链接
