Webpack 构建过程详解

Webpack  是一个功能强大的模块打包工具，它能够将项目中的各种资源（如 JavaScript、CSS、图片等）打包成一个或多个文件，以便于在浏览器中运行。本文将以 Webpack 5 为例介绍它的构建过程：

1. 初始化阶段

在这个阶段，Webpack 从配置文件和命令行参数中读取并解析配置。然后，Webpack 根据配置初始化内部状态和插件系统。

• 读取配置：从 webpack.config.js 文件或命令行参数中读取配置。

• 初始化插件：根据配置文件中的 plugins 选项初始化插件实例。

• 确定入口文件：确定项目的入口文件（entry）。

2. 构建依赖图

Webpack 会从入口文件开始，递归地解析所有依赖，形成一个依赖图。

• 解析模块：使用 Loaders 处理非 JavaScript 文件，如 CSS、图片等。每个模块会被递归地解析其依赖。

• 创建模块对象：Webpack 为每个模块创建一个模块对象，并保存在内存中。

3. 模块编译

Webpack 使用相应的 Loaders 将模块的源代码转换为可以在浏览器中运行的 JavaScript 代码。

• 处理模块：通过加载器链对模块进行转换。

• 生成 AST（抽象语法树）：Webpack 将模块源代码转换为 AST，以便进一步处理。

• 收集依赖：从 AST 中提取模块的依赖项，并将其加入到依赖图中。

4. 生成代码块

Webpack 会根据依赖图将所有模块分组