⚡ 30 秒速记
- 核心判断：生命周期是框架围绕创建、挂载、更新和卸载安排用户副作用的时序契约
- 原理主线：围绕 「核心机制」、「执行链路」、「边界与实践」 建立输入、状态变化与输出之间的因果关系
- 文章范围：分析Webpack 4.x的核心原理，通过源码解读其事件流机制、Compiler与Compilation类的生命周期管理，以及Tapable插件系统的实现方式，帮助读者全面理解Webpack的工作流程和插件扩展能力。
- 边界与代价：父子组件顺序、异步调度和
React并发渲染会让“调用过函数”不等于“已经提交到界面” - 工程落地：副作用必须放在语义匹配的阶段，并在重跑、卸载或依赖变化时正确清理
Webpack 4 本质上是由 Compiler、Compilation 和 Tapable 钩子驱动的一套插件化编译流程。 webpack-cli 先把命令行和配置转换成选项，再创建 Compiler，并由 WebpackOptionsApply 将配置落实为内部插件。构建时从入口进入 make，递归读取依赖，经过 loader 转换并解析为 AST，最后在 seal 阶段整理输出。源码中的入口类和钩子属于 Webpack 4 的历史实现，理解链路可以，但不能直接套到当前版本。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。
# Webpack本质
Webpack本质上一种基于事件流的编程范例，其实就是一系列的插件运行
Webpack主要使用Compiler和Compilation两个类来控制Webpack的整个生命周期。他们都继承了Tapabel并且通过Tapabel来注册了生命周期中的每一个流程需要触发的事件
# Tapabel
Tapabel是一个类似于Node.js的EventEmitter的库，主要是控制钩子函数的发布与订阅，是Webpack插件系统的大管家
Tapabel提供的钩子及示例
Tapable库为插件提供了很多 Hook以便挂载。
const {
SyncHook, // 同步钩子
SyncBailHook, // 同步熔断钩子
SyncWaterfallHook, // 同步流水钩子
SyncLoopHook, // 同步循环钩子
AsyncParalleHook, // 异步并发钩子
AsyncParallelBailHook, // 异步并发熔断钩子
AsyncSeriesHook, // 异步串行钩子
AsyncSeriesBailHook, // 异步串行熔断钩子
AsyncSeriesWaterfallHook // 异步串行流水钩子
} = require("tapable");
