Webpack-第 13 篇：Webpack 5 构建流程剖析与调试

Webpack-第 13 篇：Webpack 5 构建流程剖析与调试

一、Webpack 构建流程详解

（一）初始化阶段

1. 解析配置文件：Webpack 启动后，首先会读取 webpack.config.js 或其他指定的配置文件，将其中的配置项解析为内部可用的数据结构。
2. 创建编译器对象：根据解析后的配置信息，创建一个 Compiler 对象，该对象是 Webpack 的核心，负责整个构建过程的控制和协调。

（二）编译阶段

1. 入口模块解析：从配置文件中指定的入口文件开始，Webpack 会使用 loader 对入口模块进行处理。例如，如果入口文件是 .js 文件，可能会使用 babel-loader 进行转译。
2. 模块解析与递归加载：Webpack 会分析入口模块中的依赖关系，找出所有引入的模块。对于每个依赖模块，同样会使用相应的 loader 进行处理，并递归地解析这些模块的依赖，直到所有模块都被处理完毕。
3. 构建模块关系图：在解析模块的过程中，Webpack 会构建一个模块关系图，