Webpack 常用插件生命周期

Webpack 插件生命周期 = 「compiler 阶段 → compilation 阶段 → 输出阶段 → 完成阶段」四大节拍，每拍都有对应钩子；记住这张「时间轴」就能在任何时机插入手脚。

---

一、compiler 阶段（一次运行只触发一次）

钩子	触发时机	常用场景
initialize	配置初始化后	修改配置默认值
beforeRun / run	真正开始读取文件前	清除旧目录、打印启动日志
watchRun / watchClose	watch 模式专用	监听前/后逻辑

插件例：「删除旧 dist」「打印构建开始 banner」

---

二、compilation 阶段（每次文件变更都新建一个 compilation）

钩子	触发时机	常用场景
compilation	新的 compilation 创建后	注册子钩子、埋点计数
make	开始解析模块	动态添加入口
emit / afterEmit	输出前 / 后	上传 CDN、生成额外文件
afterDone	compilation 完全结束	打印总耗时、发送通知

插件例：「动态入口」「processAssets 注入 banner」

---

三、输出阶段（内存 → 磁盘）

钩子	触发时机	常用场景
processAssets（webpack5）	资源已生成，尚未写盘	修改 / 新增 / 删除任意文件
afterProcessAssets	processAssets 全部完成	二次校验、生成报告
emit	即将写盘	最后机会改文件名、加 hash
afterEmit	写盘完成	上传 OSS、刷新 CDN 缓存

插件例：「banner 注入」「生成 source-map」「上传 CDN」

---

四、完成阶段（整个编译生命周期结束）

钩子	触发时机	常用场景
done	成功完成	打印总时间、打开浏览器
failed	发生错误	发送失败通知、记录日志
watchClose	watch 结束	清理临时文件、关闭 DB 连接

插件例：「构建成功弹通知」「失败时钉钉报警」

---

五、一张图速记（时间轴）

初始化 → 读取文件 → 解析模块 → 封装 chunk → 生成 assets → 写盘 → 完成
   ↓         ↓          ↓         ↓           ↓         ↓      ↓
initialize  beforeRun   make    seal    processAssets   emit   done

---

六、一句话总结

「initialize 配置期 → make 解析期 → processAssets 产出期 → emit 写盘期 → done 收尾期」
在任何钩子插入逻辑，就能让 webpack 按你的规则跳舞。