Webpack工作流程

入口

在VSCode中调用webpack进行构建，熟悉webpack的整体构建流程。

const webpack = require("webpack");
const config = require("./webpack.config.js"); //1.读取配置文件
debugger;
const compiler = webpack(config);
function compilerCallback(err, stats) {
    const statsString = stats.toString();
    console.log(statsString);
}
debugger;
compiler.run((err, stats) => {
    compilerCallback(err, stats);
});

流程

• 初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数；

在命令行执行webpack的时候可以外加一些参数，webpack执行前会将这些参数与config文件中的参数进行merge。

• 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译； 确定入口：根据配置中的entry找出所有的入口文件

可以看到这里生成了一个Compiler对象，之后判断如果存在plugins对象，就会遍历加载所有的插件，插件会传入compiler实例，在实例上有插件需要的钩子

这里是compiler抛出去的钩子

const webpack = require("webpack");
const config = require("./webpack.config.js"); //1.读取配置文件
const compiler = webpack(config);
function compilerCallback(err, stats) {
    const statsString = stats.toString();
    console.log(statsString);
}
compiler.run((err, stats) => {
    compilerCallback(err, stats);
});

• 编译模块：从入口文件出发，调用所有配置的Loader对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

经过一顿操作，会在这里加载loader构建内容，这里将文件转为ast，遍历ast触发各种loader

• 完成模块编译：在经过第 4 步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表。
• 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果