开始之前

作为从业多年的前端工程师，深入了解 Webpack 的内部原理和逻辑细节往往不是一件容易的事。网络上虽然资源丰富，却多集中于如何运用 Webpack 而缺少其背后的工作原理解析。对此，结合对官方文档的研读及源码分析，并将其中心得整理为几篇文档和图示，希望大家有所裨益。

这一系列文章虽然基于源码分析，但并不打算直接剖析代码行。希望采用更易于理解的言语、实例和图解揭示 Webpack 的精妙之处。对源码感兴趣的读者可以依据文章中提及的关键概念，进一步搭配源码进行深入探究。

Webpack 做了什么

一张小图

下图为Webpack构建中的主要流程，也包括了 Compiler 和 Compilation 两类生命周期钩子在构建流程中执行的时机。后续主流程的分析会结合该图进行，到需要深入特定的关键节点分析时，会使用更详细的细节图来呈现。

构建的核心

Webpack 本质上是一个模块化打包平台，精心设计了资源的处理流程。通过将源代码和各资源进行转换与优化，形成适合在浏览器中高效访问的静态文件。在这过程中利用强大的生命周期钩子机制，可资源转换的重要节点插入自定义逻辑，增强并扩展打包能力。

如何理解 Webpack

首先需要读懂 Compiler 和 Compilation 两大核心。Compiler 负责整个打包流程，而 Compilation 专注于构建过程的细节（比如模块的转换和依赖关系的管理）。如果将 Webpack 的构建过程类比为房屋的装修。那么 Compiler 则是包工头，决定什么时候铺地什么时候砌墙；Compilation 则为具体的施工队，去决定如何铺地如何砌墙。

其次，需要理解 Module 和 Chunk 的结构和作用。Module 和 Chunk 分别代表了构建过程中不同阶段的抽象产物。

• Module: 代表着项目中每一个需要被打包的文件，可视作源码的抽象实例。
• Chunk: 是由多个 Module 经过组合、分割与优化而产生，用于生成最终的输出文件，可视作最终产物的抽象实例。

最后，需要掌握模块工厂和内置核心Plugin的职能。将源代码资源进行转化的过程中，Webpack 主要是通过特定的模块工厂和内置的核心 Plugin。可以视为装修施工队手中的各种工具。

• 模块工厂: 负责解析各类资源文件，创建对应的模块实例。根据配置匹配适当加载器(Loader)处理资源；收集管理模块之间的依赖关系构建项目的依赖图；采用缓存和其他优化手段提升构建性能，确保了打包过程的效率和准确性。（如 NormalModuleFactory、 ContextModuleFactory等）。
• 内置的核心 Plugin: Webpack 配备了一系列内置的核心 Plugin，实现方法与自定义的Plugin无差异。只是提前内置或者通过 Options 的字段进行应用。用于提供构建过程中最基础和最常见的功能，例如模块合并（ModuleConcatenationPlugin）、压缩优化（如 TerserWebpackPlugin）、环境变量注入（DefinePlugin）等。

构建的三个阶段

如图示，Webpack的构建流程是一个连续且复杂的过程，但通常可以概括为三个主要阶段：初始化阶段、编译阶段和输出阶段

1. 初始化阶段（Initialization）:

从 Webpack 开始执行到 initialize 生命周期

主要工作

• 解析 webpack 配置参数，合并从命令行传入的选项与配置文件中的选项
• 初始化Plugin，包括内置和配置的自定义Plugin，注册各种插件钩子
• 实例化 Compiler 对象，为接下来的编译阶段做好准备工作

2. 编译阶段（Compilation）:

从 beforeRun 生命周期到 afterCompile 生命周期

主要工作

• 从入口递归解析所有的依赖项，生成 Module
• 利用 Loader 对模块的不同文件类型进行转换
• 找出模块之间的依赖关系并构建模块依赖图
• 根据依赖关系，将处理完的模块组合成Chunk
• 在适当的钩子时机，进行模块优化、分割代码等进一步处理

3. 输出阶段（Output）:

从 shouldEmit 生命周期到最终文件输出

主要工作

• 根据编译阶段得到的Chunk，生成输出资源的内容，如为Chunk分配文件名
• 配置输出文件到文件系统中，生成最终的打包文件
• 在完成输出后，触发相应的钩子以标记构建过程的完成

后续：带着问题去分析

以上对 Webpack 的核心原理进行了全局性的综述，并概括性地描述了其主要概念与工作流程。为了深入理解Webpack，将带着解答以下关键性问题的路径去进行一系列章节的分析。希望通过具体且逐步深入的分析，达到对Webpack的全面而深刻的认识。

1. 探索 Compiler 与 Compilation：  它们各自拥有哪些核心功能及担当的主要职责？
2. 理解 Module 与 Chunk：  它们在 webpack 中扮演什么角色，有什么区别和联系，各自的结构是什么样子的？
3. make 至 finishMake 阶段的过程解密：  在这一序列阶段中，webpack 执行了哪些关键步骤？
4. 深入 finishMake 至 afterCompile 阶段：  该转换期间发生了哪些细节工作？
5. 探索 Webpack 的内置插件：  哪些插件被纳入了 Webpack 的内置核心功能？
6. 解析 Webpack 的制造中心：  Webpack 内部包含哪些关键的模块工厂，它们发挥什么样子的作用（如 NormalModuleFactory、 ContextModuleFactory）