webpack热替换原理

基本概念

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。例如，在开发 Web 页面过程中，当你点击按钮，出现一个弹窗的时候，发现弹窗标题没有对齐，这时候你修改 CSS 样式，然后保存，在浏览器没有刷新的前提下，标题样式发生了改变。感觉就像在 Chrome 的开发者工具中直接修改元素样式一样。

WDS和浏览器的EventSource通信

webpack-dev-server简称WDS,WDS启动后会与浏览器建立websocket链接。当服务器资源变换并重新编译后，会发送消息到浏览器端，如果没有配置热替换，则浏览器会刷新。

配置热替换

vue项目中，我们只用在devServer中设置hot为true来开启热替换即可，之后的vue-loader会帮我们配置。那如果不是vue项目，如何手动配置热替换呢
1、webpack配置项修改

//...
devServer:{
    //...
    hot:true//启动热替换
},
//...
plugins:[
    //...
    new webpack.HotModuleReplacementPlugin()//加入热替换插件
]

2、打包文件内配置
在你需要启动热替换的位置添加如下代码，比如你在入口文件index.js中添加热替换，那么每个模块变化都会触发热替换

//index.js
import {logToScreen} from './util.js'
logToScreen()
if(module.hot){
  module.hot.decline()//当index.js自身变换时不触发热替换而是直接刷新页面，根据情况添加这项配置
  module.hot.accept()//也可以只监听util.js的更新而触发热替换，那么就这样配置：module.hot.accept(['./util.js'])
}

热替换原理

1. Webpack编译期，为需要热更新的 entry 注入热更新代码(EventSource通信)
2. 页面首次打开后，服务端与客户端通过 EventSource 建立通信渠道，把下一次的 hash 返回前端
3. 客户端获取到hash，这个hash将作为下一次请求服务端 hot-update.js 和 hot-update.json的hash
4. 修改页面代码后，Webpack 监听到文件修改后，开始编译，编译完成后，发送 build 消息给客户端
5. 客户端获取到hash，成功后客户端构造hot-update.js script链接，然后插入主文档
6. hot-update.js 插入成功后，执行hotAPI 的 createRecord 和 reload方法，获取到 Vue 组件的 render方法，重新 render 组件， 继而实现 UI 无刷新更新。