webpack的热重载/热更新HMR是如何实现的

概念

关键词：热更新/热重载/HMR（Hot Module Replacement）
效果：浏览器的无刷新更新，允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面
目的：加快开发速度，所以只适用于开发环境下使用

疑惑

平时使用HMR的时候，我都会有这样的疑惑？

1. webpack 会将不同的模块打包成不同 bundle 或 chunk 文件， 但是在使用 webpack 进行 dev 模式开发的时候，我并没有在我的 dist 目录中找到 webpack 打包好的文件，它们去哪了呢？
2. 这些文件是怎么替换的？

核心原理

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

参考资料

https://www.cnblogs.com/liangyin/p/16579708.html