webpack系列 — 插件系统
type
status
date
slug
summary
tags
category
icon
password
下面会详细介绍webpack构建流程中各个可以订阅的生命周期，并具体说明插件具体如何扩展webpack功能
完整的生命周期流程图
具体说明
1. 初始化阶段
Compiler 钩子
钩子 | 触发时机 | 适合的操作 |
initialize | Webpack 初始化时 | 设置全局工具或缓存（如清理旧缓存） |
environment | 环境变量和配置应用后 | 修改全局配置（如根据环境注入变量） |
afterEnvironment | 环境准备完成后 | 校验配置合法性或初始化自定义插件 |
2. 构建启动阶段
Compiler 钩子
钩子 | 触发时机 | 适合的操作 |
beforeRun | 开始构建前 | 执行前置任务（如检查依赖版本） |
run | 构建启动时（非监听模式） | 记录构建开始时间或发送监控事件 |
watchRun | 监听模式启动时 | 提示开发者已进入监听模式 |
infrastructureLog | 日志系统初始化后 | 自定义日志格式（如高亮错误） |
3. 模块解析与编译阶段
Compilation 钩子
钩子 | 触发时机 | 适合的操作 |
buildModule | 开始构建单个模块前 | 过滤特定模块（如跳过 node_modules 中的某些库） |
succeedModule | 模块构建成功时 | 收集模块元数据（如记录模块大小） |
finishModules | 所有模块构建完成 | 分析模块依赖关系（如生成依赖报告） |
failedModule | 模块构建失败时 | 自定义错误处理（如发送通知到 Slack） |
4. 优化阶段
Compilation 钩子
钩子 | 触发时机 | 适合的操作 |
optimize | 优化阶段开始时 | 注入自定义优化逻辑（如合并重复代码） |
optimizeModules | 模块优化（Tree Shaking） | 手动标记未使用的导出（辅助 Tree Shaking） |
optimizeChunks | Chunk 优化（代码分割） | 调整代码分割策略（如合并小 Chunk） |
optimizeChunkAssets | Chunk 资源优化前 | 压缩或混淆代码（如自定义 Terser 规则） |
optimizeAssets | 所有资源优化完成 | 最终资源检查（如验证文件哈希） |
5. 资源生成阶段
Compilation 钩子
钩子 | 触发时机 | 适合的操作 |
processAssets | 处理资源文件时 | 修改/添加资源（如插入版权注释、生成 Service Worker） |
additionalAssets | 允许添加额外资源 | 动态生成文件（如版本号文件、分析报告） |
Compiler 钩子
钩子 | 触发时机 | 适合的操作 |
emit | 资源写入磁盘前 | 最后修改机会（如替换 HTML 模板变量） |
afterEmit | 资源写入磁盘后 | 触发后续任务（如上传 CDN、通知构建完成） |
assetEmitted | 单个文件输出完成 | 跟踪文件输出状态（如校验文件完整性） |
6. 构建结束阶段
Compiler 钩子
钩子 | 触发时机 | 适合的操作 |
done | 构建成功完成 | 输出统计信息（如体积分析、耗时报告） |
failed | 构建失败时 | 错误上报或回滚操作 |
shutdown | 编译器关闭时 | 释放资源（如关闭数据库连接） |
7. 监听模式特有阶段
Compiler 钩子
钩子 | 触发时机 | 适合的操作 |
watchClose | 监听模式停止时 | 清理临时文件或恢复环境 |
invalid | 文件变化但未触发重新构建时 | 提示开发者文件变动（如控制台打印变更文件列表） |