前端Webpack中`compilation` 和 `compiler`

在前端Webpack中,compilationcompiler 是两个核心对象,它们在整个构建流程中扮演着不同的角色。理解它们的区别对于编写Webpack插件和深入理解Webpack工作原理至关重要。

Compiler (编译器)

Compiler 对象是Webpack的核心引擎 ,它代表了整个Webpack构建的生命周期。 [1][2]

  • 全局性与生命周期 : Compiler 是一个全局单例对象,在Webpack启动时(无论是通过命令行接口CLI还是Node.js API)只创建一次,并贯穿整个Webpack的运行过程。 [1][2]

  • 职责:

    • 它负责从Webpack配置中读取所有的选项。 [1]
    • 它初始化并管理整个Webpack构建过程。 [1][2]
    • 它负责创建 Compilation 实例。 [1][2]
    • 它处理文件监听(watch 模式),当文件发生变化时触发重新编译。 [1]
    • 它提供了许多高层级的生命周期钩子(hooks) ,允许插件在Webpack的整体运行阶段进行干预,例如在开始编译前、编译完成时、或在文件输出时等。 [1][2] 常见的钩子有 beforeRun, run, compile, emit, done 等。 [1][3]
  • 插件交互 : 大多数用户级别的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 则像一个具体任务的执行团队,负责完成项目中的每一个详细任务(模块编译、打包、优化等)。每次项目经理启动一个新项目或重新开始一个项目时,都会组建一个新的执行团队。

相关推荐
楚轩努力变强43 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端1 小时前
rust基础二(闭包)
前端·rust
菜鸟学Python1 小时前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er1 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
未来之窗软件服务3 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录3 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国3 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸3 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest