Webpack-面试-热更新HMR
2026年10月16日·Admin·1 次浏览
面试题：Webpack HMR 是什么原理？全量刷新 vs 热替换？
HMR（Hot Module Replacement）
不刷新整页的情况下，把变更模块替换进运行中的 bundle，保留应用状态（如表单输入、路由栈）。
大致机制
- Webpack Dev Server 与浏览器 WebSocket 通信。
- 文件变更 → 编译热更新 chunk → 推送 hash 与更新清单。
- 运行时 HMR runtime 拉取补丁，执行 module.hot.accept 回调；未 accept 则回退整页刷新。
框架侧
Vue Loader / React Fast Refresh 等在 loader 层注入 accept 逻辑，开发者少手写。