HMR

2022-11-15 09:15:39

Hot Module Replace 热模块更新

• 使用 webpack-dev-server (简称 WDS)托管静态资源，同时以 Runtime 方式注入 HMR 客户端代码
• 浏览器加载页面后，与 WDS 建立一个 WebSocket 长连接
• Webpack 通过watch文件变化，增量构建发生变更的模块，并通过 WebSocket 发送 hash 事件
• 浏览器接收到 hash 事件后，请求 manifest 资源文件，确认增量变更范围
• 浏览器加载发生变更的增量模块
• Webpack 运行时触发变更模块的 module.hot.accept 回调，执行代码变更逻辑
• done