Webpack 提供了丰富的钩子(Hooks),这些钩子允许开发者在不同的构建生命周期中进行操作。以下是一些常见的 Webpack 钩子:
1. run
- 在 Webpack 开始构建时触发。
- 可以用来执行一些初始化的操作,比如清理缓存或者加载配置。
2. beforeRun
- 在构建开始之前触发。
- 可以在这里修改 Webpack 配置或做一些准备工作。
3. compile
- 当 Webpack 开始编译模块时触发。
- 允许你在编译阶段进行操作。
4. compilation
- 在 Webpack 编译阶段的每个编译实例开始时触发。
- 提供了对每个模块的访问,可以在这里修改模块。
5. emit
- 在构建完成并生成资源文件之前触发。
- 可以在这个阶段修改生成的资源,或者做一些处理,例如修改输出文件。
6. done
- 构建完成时触发。
- 在这里,你可以获取到构建的整体结果,执行一些清理工作或日志输出等。
7. invalid
- 当文件被修改后,Webpack 会触发此钩子。
- 这个钩子通常用来启动增量构建,或者在文件更改时通知开发者。
8. failed
- 当构建失败时触发。
- 你可以在这里做一些错误处理或日志记录。
9. watchRun
- 在构建过程中的文件被修改后,触发这个钩子。
- 主要用于监视文件变化,可以在这里加速构建过程。
10. afterCompile
- 在 Webpack 完成编译之后触发。
- 你可以在这里执行一些后续处理,比如合并结果。
11. build
- 在每次构建开始之前触发。
- 可以用来改变构建流程,例如修改输出目录等。
12. contextModuleFactory
- 在上下文模块(
require.context())的创建过程中触发。 - 可以用来定制如何解析特定的上下文模块。
13. moduleFactory
- 在模块创建时触发。
- 允许你修改模块的创建过程,或者定义如何加载特定类型的模块。
14. optimize
- 当 Webpack 执行优化操作时触发。
- 在这里,你可以控制模块如何被优化,例如修改 Chunk 的拆分策略等。
这些钩子大多数都可以通过 Webpack 插件的方式来监听并修改构建过程。你可以通过 compiler.hooks 来访问这些钩子。例如:
复制编辑
compiler.hooks.run.tap('MyPlugin', (compiler) => {
console.log('Webpack is starting to build!');
});
有些钩子可以接收 tap 或 tapAsync 方法来进行监听,tapAsync 允许你使用异步操作。