【Webpack】HMR 热更新

HMR全称Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。

不使用热更新，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会；如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，只会重新编译修改的代码，将新的模块发送到客户端，替换掉旧的模块，不必完全刷新整个应用。

实现 HMR 的关键是在客户端和服务器端之间建⽴⼀个 WebSocket 连接，当代码发⽣变化
时，服务器端会将新的模块发送给客户端，客户端接收到新的模块后会⽤新模块替换旧模块，从⽽实现实时更新。

 const webpack = require('webpack')module.exports = {// ...devServer: {//  HMR hot: true// hotOnly: true}}

具体来说，webpack HMR 主要分为以下⼏个步骤：

1. webpack-dev-server 将打包输出 bundle 。
2. 每当文件发生变更时，webpack 将会重新编译，webpack-dev-server 将会监控到此时文件变更事件，并找到其对应的 module。
3. webpack-dev-server 将会把变更模块通知到浏览器端，此时使用 websocket 与浏览器进行交流。
4. 浏览器根据 websocket 接收到 hash，并通过 hash 以 JSONP 的方式请求更新模块的 chunk。
5. 浏览器加载 chunk，并使用新的模块对旧模块进行热替换，并删除其缓存。