Skip to main content

热更新

热更新​

  1. client 注入。修改 webpack.config.js 的 entry 配置，打包到同一个 bundle 中
  2. 建立 ws 通信
  3. Webpack-dev-middleware 监听文件改动，进行增量构建，借助memory-fs 将改动模块写入内存
  4. 发送 hash 事件，通知客户端
  5. 浏览器接收到 hash 事件后，请求 manifest 资源文件，确认增量变更范围。HotModuleReplacement hotCheck，ajax 请求获取 json，包含需要热更的文件和 hash
  6. 客户端通过 jsonp 请求获取更新的文件内容
  7. 加载发生变更的增量模块（hotApply，hotUpdate），Webpack 运行时触发变更模块的 module.hot.accept 回调，执行代码变更逻辑

一些问题：

  • 为什么用 jsonp 请求资源文件？
  • EventSource。旧版 webpack 使用？

参考