一、概述

（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更新