前端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 则像一个具体任务的执行团队,负责完成项目中的每一个详细任务(模块编译、打包、优化等)。每次项目经理启动一个新项目或重新开始一个项目时,都会组建一个新的执行团队。

相关推荐
耶啵奶膘1 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全5 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机6 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui