关于webpack学习记录:webpack热替换原理

基本概念

Hot Module Replacement（以下简称 HMR）是 webpack 倒退至今引入的最令人兴奋的个性之一，当你对代码进行批改并保留后，webpack 将对代码从新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就可能对利用进行更新。例如，在开发 Web 页面过程中，当你点击按钮，呈现一个弹窗的时候，发现弹窗题目没有对齐，这时候你批改 CSS 款式，而后保留，在浏览器没有刷新的前提下，题目款式产生了扭转。感觉就像在 Chrome 的开发者工具中间接批改元素款式一样。

WDS 和浏览器的 EventSource 通信

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

配置热替换

vue 我的项目中，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 无刷新更新。