模块热替换(HMR)
模块热替换是指在应用程序运行过程中，替换，添加，删除模块，而无需刷新整个页面。
HMR通过如下几种方式来提高开发效率：
1.不重新加载页面，保证某些应用状态不会丢失
2.只更新变化的内容，提高开发效率
3.修改css,js代码会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式
使用HMR
1.配置webpack-dev-server
devServer: { hot : true }
2.指定哪个模块使用模块热更新
module.hot.accept(依赖，回调函数)
在 vue 和 react 中，使用vue-loader已经支持vue 组件的HMR，react 使用的 react hot loader实时调整react组件 (目前已更改为react-refresh)
react-refresh实现热更新
1. 安装react-refresh-webpack-plugin插件
2. 配置插件
const ReactRreshWebpackPlugin = require(xxxxxx) new ReactRreshWebpackPlugin()
3. 将插件设置到babel的plugin中
HMR热更新原理
webpack-dev-server创建两个服务：提供静态资源服务和socket服务
express server负责直接提供静态资源服务
HMR Socket Server 是一个长连接，建立连接后双方可以通信，当服务器监听到对应模块改变时，会产生两个文件.json文件(manifset) 和 .js文件(unpdate chunk)，通过长连接，可以直接将这两个文件主动发送给客户端，浏览器拿到这两个新文件后，通过HMR runtime机制加载这两个文件，并且针对修改的模块进行更新