一、概述

（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、客户端处理增量更新。