请解释 Webpack 热更新（HMR）的底层实现机制，并说明它为什么能在不刷新浏览器的情况下完成页面更新？

回答思路

1. 【回答框架 1】HMR 的核心是模块热替换，它依赖 Webpack 的编译器和运行时的配合。编译器在构建时生成模块的依赖图，并注入 HMR runtime 代码，用于监听更新信号。
2. 【回答框架 2】当代码变更时，Webpack 重新编译并生成更新清单（manifest）和更新 chunk，通过 WebSocket 或 EventSource 通知浏览器。浏览器端的 HMR runtime 收到更新后，会请求新的模块代码。
3. 【回答框架 3】HMR runtime 根据模块的 accept 或 self-accept 标记，决定是否接受更新。如果模块声明了 accept，则替换模块并执行新的模块代码，同时触发依赖模块的更新；否则会回退到整页刷新。
4. 【回答框架 4】更新过程中，HMR runtime 会保留应用状态，通过执行模块的 dispose 或 addDisposeHandler 清理旧资源，再执行新的模块代码，从而实现无刷新更新。
5. 【回答框架 5】如果更新链中某个模块未声明 accept，HMR 会向上冒泡，直到找到可接受的父模块；若没有，则触发整页刷新，保证应用一致性。
6. 【关键点 1】HMR 依赖 Webpack 编译器和浏览器端 runtime 的协作，通过 WebSocket 传递更新信号。
7. 【关键点 2】模块必须声明 accept 才能被热替换，否则会触发整页刷新。
8. 【关键点 3】HMR 保留应用状态，通过 dispose 清理旧模块资源，再执行新模块代码。
9. 【易错点 1】不要认为 HMR 能处理所有模块更新，未声明 accept 的模块会导致刷新。
10. 【易错点 2】HMR 更新是异步的，不能保证所有依赖模块同时更新，需注意状态一致性。
11. 【易错点 3】HMR 在开发环境有效，生产环境通常禁用，不能依赖它做线上热更新。