webpack 的构建流程是什么?

Webpack 的构建流程可以分为 初始化 → 编译 → 输出 三大阶段，每个阶段又包含若干步骤。

1. 初始化阶段

读取配置文件

• Webpack 会读取 webpack.config.js（或 CLI 传参）并合并默认配置。

• 确定入口 (entry)、输出 (output)、模块规则 (module.rules)、插件 (plugins) 等。

创建 Compiler 实例

• Webpack 核心是 Compiler，它管理整个构建过程。

• 注册插件：执行插件的 apply(compiler) 方法，把钩子挂载到对应生命周期。

2. 编译阶段

这个阶段最重要，它会把源码转成浏览器可执行的 bundle。

从入口文件开始递归解析依赖

• 通过 entry 指定的入口文件，开始构建 依赖图。

• 使用 Loader 处理非 JS 文件（如 CSS、图片、TypeScript）。

调用 Loader 转换源码

• Webpack 读取文件后，先交给对应的 Loader 链处理。

• 比如 .vue → vue-loader，.scss → sass-loader → css-loader → style-loader。

AST 解析并收集依赖

• 使用 acorn 等工具解析 JavaScript 代码为 AST。

• 遇到 import 或 require，递归解析依赖文件。

生成 Chunk

• 每个入口文件对应一个 Chunk。

• 如果开启 代码分割（SplitChunks），会拆分成多个 Chunk。

3. 输出阶段

调用 Template 生成最终文件

• 将所有模块打包到 bundle.js，根据 output.filename 命名。

• 插入运行时代码（如 webpack_require）来管理模块加载。

写入文件系统

• 最终输出到 dist 目录（或配置的 output.path）。

• 执行插件的 emit 钩子，可以在输出前修改内容。

Webpack 的生命周期钩子（简化版）

• initialize → beforeRun → run

• compile → make → buildModule → seal

• emit → done

一句话总结：

Webpack 从入口文件出发 → 递归解析依赖 → 用 Loader 转换模块 → 用 Plugin 扩展功能 → 打包成一个或多个 Chunk → 输出到指定目录。

如图