模块热替换（HMR）
什么是模块热替换
HMR（Hot Module Replacement），在应用程序运行过程中，添加、替换、删除模块，而无需刷新整个页面
优点：
- 不重新加载整个页面，这样可以保持某些应用程序状态不丢失
- 只更新需要变化内容，节省开发时间
- 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中修改样式
使用HMR：
webpack-dev-serve已经支持HMR，我们开启即可，不开启的话当我们修改了源代码，整个页面会自动刷新，使用的是live reloading（热加载）
如果想要指定某个模块热替换：
if(module.hot){
module.hot.accept("xx文件",()=>{
//想要执行的操作
})
}
原理：
- webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）
- express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）
HMR Socket Server是一个socket的长连接： - 建立连接后双方可以通信
- 当服务器监听到对应的模块发生变化时，会生成两个文件，.json(manifest文件)和.js文件(update chunk)
- 通过长连接可以直接将这两个文件主动发送给客户端（浏览器）
- 浏览器拿到这两个新的文件后，通过HRM runtime机制，加载这两个文件，并且针对修改的模块进行更新
