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项目，如何手动配置热替换呢
一、webpack配置项修改

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

二、打包文件内配置
在你须要启动热替换的位置添加以下代码，好比你在入口文件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 无刷新更新。