Q04：讲一讲 Webpack 的完整构建流程？从读取配置到输出文件经历了哪些核心阶段？
⏱ 预计阅读时间：4 分钟
原题：讲一讲 Webpack 的完整构建流程？从读取配置到输出文件经历了哪些核心阶段？
🎯 面试官在考什么
- 考点1：Webpack 构建的三阶段主线（初始化 → 构建 → 生成）
- 考点2：Tapable 事件流体系——插件如何通过钩子介入每个阶段
- 考点3：依赖图（Dependency Graph）的生成过程与意义
✅ 答题框架（建议顺序）
- 先说三个核心阶段：初始化（读取配置、创建 Compiler）→ 构建/编译（从 Entry 递归解析依赖、调用 Loader 转换、构建依赖图）→ 生成/输出（根据依赖图拼装 Chunk、生成产物写入 dist）
- 再展开构建阶段的细节：从 Entry 开始，对每个模块调用匹配的 Loader 链做转换 → 用 Parser（acorn）将转换后的代码解析为 AST → 从 AST 中提取 import/require 依赖 → 递归处理依赖模块 → 最终形成完整的依赖图
- 最后说 Tapable 的角色：Webpack 的每个阶段都有对应的钩子（如
compiler.hooks.make、compilation.hooks.seal），Plugin 通过tap/call机制注册回调介入流程，这就是 Webpack 可扩展性的根基
⚠️ 常见踩坑
- 把构建流程说成"读文件 → 转换 → 输出"三步完事 → 太粗糙。面试官要听的是依赖图如何递归生成、Loader 链如何执行、Chunk 如何拆分等细节
- 混淆 Compiler 和 Compilation → Compiler 是全局单例，代表整个 Webpack 生命周期（从启动到退出）；Compilation 是单次编译的实例，每次构建（含 watch 重构建）都会创建新的 Compilation
- 认为依赖图只在构建阶段生成 → 依赖图在构建阶段开始构建，但 Chunk 的划分是在生成阶段的
seal过程中完成的，依赖图和 Chunk 图是两步
💎 加分项
- 画出或口述关键钩子的触发顺序：
entryOption→afterPlugins→beforeRun→run→make→seal→emit→done，展示对生命周期的精确掌握 - 提到 Module 和 Chunk 的区别：Module 是单个文件模块，Chunk 是一组 Module 的集合（由 SplitChunks 或动态 import 决定分组）
- 提到 Webpack 5 的 Module Graph 和 Chunk Graph 分离：依赖图记录模块间引用关系，Chunk 图记录模块到 Chunk 的归属关系，两者独立维护
📚 关键知识点速查
- Compiler：Webpack 全局实例，代表从启动到退出的完整生命周期，继承自 Tapable，只创建一次
- Compilation：单次编译实例，包含模块资源、编译生成的 chunk、依赖图等，每次构建（含 watch）创建新的
- Tapable：Webpack 的插件事件系统，提供 SyncHook、AsyncSeriesHook 等钩子类型，是 Plugin 机制的基石
- 依赖图（Dependency Graph）：从 Entry 出发递归解析 import/require 构建的模块引用关系图，是打包的核心数据结构
- Loader 链：对匹配模块从右到左（从后到前）依次执行转换的函数链，如
use: ['style-loader', 'css-loader'] - seal 阶段：构建阶段后、输出阶段前的关键步骤，根据依赖图和优化策略将 Module 分组为 Chunk
优先级：🔴高频
