webpack之热更新/替换

模块热替换（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机制，加载这两个文件，并且针对修改的模块进行更新