在前端Webpack中，compilation 和 compiler 是两个核心对象，它们在整个构建流程中扮演着不同的角色。理解它们的区别对于编写Webpack插件和深入理解Webpack工作原理至关重要。
Compiler (编译器)
Compiler 对象是Webpack的核心引擎，它代表了整个Webpack构建的生命周期。 [1][2]
-
全局性与生命周期:
Compiler是一个全局单例对象，在Webpack启动时（无论是通过命令行接口CLI还是Node.js API）只创建一次，并贯穿整个Webpack的运行过程。 [1][2] -
职责:
-
插件交互: 大多数用户级别的Webpack插件会首先注册到
Compiler对象上，通过compiler.hooks.someHook.tap(...)的方式来监听和响应Webpack生命周期中的事件。 [1][4] -
Tapable 继承:
Compiler继承自Tapable类，这使得它能够通过发布-订阅模式来注册和调用各种钩子。 [1][4]
Compilation (编译)
Compilation 对象代表了Webpack一次具体的构建过程。 [2][5]
-
局部性与生命周期: 每当Webpack执行一次新的编译（包括在
watch模式下的每一次重新构建），都会创建一个全新的Compilation实例。 [2][5] -
职责:
- 它是Webpack中执行实际构建工作的“心脏”或“大脑”。 [2]
- 它包含了当前构建过程的所有信息，例如模块、依赖、Chunk、生成的资源（assets）等。 [2][5]
- 它负责构建模块依赖图，解析模块间的依赖关系。 [2][6]
- 它负责编译模块，应用Loader对模块进行转换。
- 它负责生成Chunk，并将模块组织到不同的Chunk中。 [6]
- 它负责优化（如Tree Shaking、代码压缩等）。 [4]
- 它负责生成最终的输出文件（assets）。 [6][7]
- 它提供了更细粒度的生命周期钩子，允许插件在模块处理、Chunk优化、资源生成等具体步骤中进行干预。 [4][7] 常见的钩子有
optimize,processAssets,addEntry等。 [4][8]
-
插件交互: 插件通常在
Compiler的钩子中获取到Compilation实例，然后通过compilation.hooks.someHook.tap(...)来操作当前构建的细节，例如修改生成的资源、添加新的模块等。 [4][7] -
子编译器:
Compilation还可以创建子编译器（createChildCompiler），这允许在Webpack内部运行另一个Webpack实例，通常用于处理特殊资源或独立构建流程。 [6][9]
总结区别
| 特性 | Compiler (编译器) | Compilation (编译) |
|---|---|---|
| 角色 | Webpack的全局协调者，代表整个构建环境。 [1][2] | 单次构建的执行者，代表一次具体的编译过程。 [2][5] |
| 生命周期 | 在Webpack启动时创建一次，贯穿整个运行周期。 [1][2] | 每次构建（包括watch模式下的重编译）都会创建新的实例。 [2][5] |
| 职责范围 | 负责整体配置、文件监听、创建Compilation实例等高层级任务。 [1][3] | 负责模块的解析、加载、转换、依赖图构建、Chunk生成、优化和资源输出等具体构建任务。 [2][6] |
| 钩子粒度 | 提供高层级的生命周期钩子（如 run, done）。 [1][3] | 提供更细粒度的构建流程钩子（如 processAssets, optimize）。 [4][8] |
| 获取方式 | 通过Webpack的Node.js API直接获取，或在插件的apply方法中作为参数传入。 [2][7] | 在Compiler的某些钩子中（例如compiler.hooks.compilation.tap）作为参数传入。 [4][7] |
简而言之，Compiler 就像一个项目经理，负责启动和管理整个项目（Webpack构建过程），而 Compilation 则像一个具体任务的执行团队，负责完成项目中的每一个详细任务（模块编译、打包、优化等）。每次项目经理启动一个新项目或重新开始一个项目时，都会组建一个新的执行团队。
