Webpack 构建流程

Webpack 的构建流程是一个串行的过程，从启动到结束依次执行以下步骤：

1. 初始化参数

从配置文件和 Shell 语句中读取与合并参数，得出最终的配置参数。

2. 开始编译

用初始化得到的参数创建 Compiler 对象，加载所有配置的插件，并执行 run 方法开始编译。

3. 确定入口

根据配置中的 entry 找出所有的入口文件。

4. 编译模块

从入口文件开始，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，递归处理直到所有入口依赖的文件都经过处理。

5. 完成模块编译

在第4步中使用 Loader 翻译完所有模块后，得到每个模块被翻译后的最终内容及其依赖关系。

6. 输出资源

根据入口和模块之间的依赖关系，组装成包含多个模块的 Chunk，再将每个 Chunk 转换成单独的文件加入到输出列表。这是修改输出内容的最后机会。

7. 输出完成

在确定好输出内容后，根据配置确定输出的路径和文件名，将文件内容写入文件系统。

插件与事件

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

简要总结

1. 初始化：启动构建，读取与合并配置参数，加载插件，实例化 Compiler。
2. 编译：从 entry 出发，针对每个模块串行调用对应的 Loader 翻译文件内容，再找到该模块依赖的模块，递归进行编译处理。
3. 输出：将编译后的模块组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中。

通过上述流程，Webpack 实现了从源码到输出文件的自动化构建过程。每一步都可以通过配置和插件进行定制和扩展，使得 Webpack 具有很高的灵活性和强大的功能。