一、概述
（1）live reload
只要检测到代码改动就会自动重新构建，然后触发网页刷新
（2）webapack中的模块热替换
可以让代码在页面不刷新的前提下得到最新的改动，甚至不需要重新发起请求就能看到更新后的效果。
二、开启HMR
（1）HMR是需要手动开启的，并且有一些必要条件。
（2）确保项目是基于webpack-dev-server或webpack-dev-middle进行开发的，webpack本身的命令行并不支持HMR。
const webpack = require('webpack');
module.exports = {//...plugins: [new webpack.HotModuleReplacementPlugin()],devServer: {hot: true}
}1、配置产生的结果是Webpack会为每个模块绑定一个module.hot对象，这个对象包含了HMR的API。借助这些API不仅可以实现对特定模块开启或者关系HMR，也可以添加热替换之外的逻辑。
2、调用HMR API 有两种方式，一种是手动地添加这部分代码；另一种是借助一些现成地工具，如react-hot-loader、vue-loader等。
3、如果应用的逻辑比较简单，可以直接手动添加代码来开启HMR。
//index.js
import { add } from 'util.js';
add(2, 3);
if (module.hot) {module.hot.accept();
}假设index.js是应用的入口，可以把调用HMR API的代码放在入口中，这样HMR对于index.js和其依赖的所有模块都会生效。当发现有模块发生变动时，HMR会使应用在当前浏览器环境下重新执行一遍index.js（包括其依赖）的内容，但页面本身不会刷新。
三、HMR大致原理
（1）在本地开发环境下，浏览器是客户端，webpack-dev-server（WDS）相当于服务端。
（2）HMR的核心是客户端从服务端拉取更新后的资源（准确得说，HMR拉取的不是整个资源文件，而是chunk diff即chunk需要更新的部分）
1、WDS对本地源文件进行监听，当本地资源发生变化时WDS通过websocket向浏览器推送更新事件，并带上这次构建的hash，让客户端与上一次资源进行比对。
2、客户端发现有差别，会向WDS发送一个请求来获取更改文件的列表，即哪些模块有了改动。通常这个请求的名字为[hash].hot-update.json。
3、请求返回结果会告诉客户端，需要更新的chunk名字和hash。客户端借助这些信息继续向WDS获取该chunk的增量更新。
4、客户端处理增量更新。
四、HMR API
moudle.hot.decline：将当前文件的HMR关掉，当前文件发生改变时禁止使用HMR进行更新，只能刷新整个页面。
module.hot.accept(['./util.js'])：当util.js发生改变时仍然可以启用HMR更新
五、热更新原理
（1）配置热更新
（2）npm run dev 进入 webpack-dev-server.js文件
1、webpack(config)生成一个compiler
2、new Server(compiler, options, log)生成一个server，启动一个本地服务
3、启动websocket服务，通过websocket，可以建立本地服务和浏览器的双向通信。
（3）进入webpack-dev-server/lib/Server.js
updateCompiler(this.compiler, this.options);
this.setupHooks();
this.setupDevMiddleware();1、server里先调用updateCompiler
1）两段关键代码：一个是获取websocket客户端代码路径，另一个是根据配置获取webpack热更新代码路径。
2）作用：修改webpack.config.js的entry配置，将webpack-dev-server/client（socket）和webpack/hot/dev-server（检查更新逻辑）注入客户端。
// 修改后的entry入口
{ entry:{ index: [// 上面获取的clientEntry'xxx/node_modules/webpack-dev-server/client/index.js?http://localhost:8080',// 上面获取的hotEntry'xxx/node_modules/webpack/hot/dev-server.js',// 开发配置的入口'./src/index.js'],},
} b、setupHooks方法
1）用来注册监听事件的，监听每次webpack编译完成。（监听了compiler.done）
2）当监听到一次webpack编译结束，就会调用_sendStats方法通过websocket给浏览器发送通知，ok和hash事件，这样浏览器就可以拿到最新的hash值了，做检查更新逻辑
c、setupDevMiddleware
1）webpack监听文件变化
2）这个方法主要执行了webpack-dev-middleware库，作用是本地文件的编译和输出以及监听，webpack-dev-server只负责启动服务和前置准备工作，所有文件相关的操作都抽离到webpack-dev-middleware库了（调用了compiler.watch方法）
3）webpack-dev-middleware最后执行setFs方法，这个方法主要目的就是将编译后的文件打包到内存。
（4）浏览器接收到热更新的通知
1）/webpack-dev-server/client/index.js，注入到客户端的代码，即websocket，接收到ok和hash事件推送。hash事件：更新最新一次打包后的hash值。 ok事件：进行热更新检查
2）ok回调函数调用reloadApp，方法又利用node.js的EventEmitter，发出webpackHotUpdate消息
3）'xxx/node_modules/webpack/hot/dev-server.js'，注入到客户端的另外一个入口代码，会监听webpackHotUpdate这个事件并且获取到最新的hash，事件内部调用check。
4）check方法内部，检查更新调用的是module.hot.check方法，此方法是通过HotModuleReplacementPlugin注入的
5）module.hot.check方法内部，利用上一次保存的hash值，调用hotDownloadManifest发送xxx/hash.hot-update.json的ajax请求，请求结果获取热更新模块，以及下次热更新的Hash 标识，并进入热更新准备阶段
6）调用hotDownloadUpdateChunk发送xxx/hash.hot-update.js 请求，通过JSONP方式（JSONP获取的代码可以直接执行）
7）通过xx/hash.hot-update.js 请求获取回来的新编译后的代码是在一个webpackHotUpdate函数体内部的。也就是要立即执行webpackHotUpdate这个方法。
8） webpackHotUpdate方法内部调用hotAddUpdateChunk方法，此方法会把更新的模块moreModules赋值给全局全量hotUpdate，再调用hotUpdateDownloaded方法，hotUpdateDownloaded方法会调用hotApply进行代码的替换。
9）hotUpdate代码做的事
a、删除过期的模块，就是需要替换的模块
b、将新的模块添加到 modules 中
c、通过__webpack_require__执行相关模块的代码
（5）过程图
