HMR是webpack內建的，只能用在開發模式，不能用於生產模式。是webpack提供的最有用的功能之一。

1.更新webpack-dev-server配置

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('htmlwebpackplugin');
const webpack = require('webpack');
module.exports = {
 entry: {
 - app: './src/index.js',
 - print: './src/print.js'
 
,
 + app: './src/index.js'
 },
 devtool: 'inline-source-map',
 devServer: {
  contentBase: './dist',
+  hot: true
 },
 plugins: [
  new HtmlWebpackPlugin({
   title: 'jkkk'
  }),
+  new webpack.HotModuleReplacementPlugin()
 ],
 output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname,'dist'
 
)
 }
}

第二種可選的方法就是命令列修改webpack-dev-server的配置：webpack-dev-serve --hotOnly

2. 修改index.js檔案以及它匯入的js檔案。

在index.js裡，進行更新繫結當依賴的模組有變化時，做些事情。

import _ from 'loadash';
import printMe from './print.js';
 function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button'
 
);

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());
 + if(module.hot){
 +  module.hot.accept('./print.js',function(){//依賴模組改變時
 +   console.log('accepting the updated printMe...');
 +  printMe();
 + });
  }

修改print.js檔案之前，我們npm run dev，檢視執行結果，以便和後續修改print.js檔案後作對比。
print.js：

  export default function printMe() {
-   console.log('I get called from print.js!');
+   console.log('Updating print.js...')
  }

修改print.js後，不用重新整理就可以在瀏覽器console中發現類似下面的內容：

[HMR] Waiting for update signal from WDS...
main.js:4395 [WDS] Hot Module Replacement enabled.
+ 2main.js:4395 [WDS] App updated. Recompiling...
+ main.js:4395 [WDS] App hot update...
+ main.js:4330 [HMR] Checking for updates on the server...
+ main.js:10024 Accepting the updated printMe module!
+ 0.4b8ee77….hot-update.js:10 Updating print.js...
+ main.js:4330 [HMR] Updated modules:
+ main.js:4330 [HMR]  - 20
+ main.js:4330 [HMR] Consider using the NamedModulesPlugin for module names.

進行完以上兩步後，發現兩個問題。一、第一次確實可以更新到內容，但是後面修改print.js檔案的內容就再也無法在瀏覽器看到輸出了。二、點選示例頁面上的按鈕，你會發現控制檯仍在列印這舊的 printMe 功能。這是因為按鈕的 onclick 事件仍然繫結在舊的 printMe 函式上。
因此，第三步是很必要的步驟

3. 在module.hot.accept裡更新繫結新的函式

  import _ from 'lodash';
  import printMe from './print.js';

  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;  // onclick 事件繫結原始的 printMe 函式上

    element.appendChild(btn);

    return element;
  }

- document.body.appendChild(component());
+ let element = component(); // 當 print.js 改變導致頁面重新渲染時，重新獲取渲染的元素
+ document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
-     printMe();
+     document.body.removeChild(element);
+     element = component(); // 重新渲染頁面後，component 更新 click 事件處理
+     document.body.appendChild(element);
    })
  }

更新後發現點選按鈕還是執行原來的函式，這個問題暫時還沒解決。原本這個內容就很容易出錯，執行不了，但是loader會使模組熱替換變得容易。

4.模組熱替換+loader

1.安裝

npm install --save-dev style-loader css-loader

2.配置webpack.config.js

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const webpack = require('webpack');

  module.exports = {
    entry: {
      app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      hot: true
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: ['style-loader', 'css-loader']
+       }
+     ]
+   },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

style.css:

body {
  background: blue;
}

index.js:

  import _ from 'lodash';
  import printMe from './print.js';
+ import './styles.css';

  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;  // onclick event is bind to the original printMe function

    element.appendChild(btn);

    return element;
  }

  let element = component();
  document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
      document.body.removeChild(element);
      element = component(); // Re-render the "component" to update the click handler
      document.body.appendChild(element);
    })
  }

vue-loader：此 loader 支援用於 vue 元件的 HMR，提供開箱即用體驗。

3.自動編譯程式碼和模組熱替換的區別

自動編譯程式碼：實時重新載入，重新載入整個頁面。
模組熱替換：避免重新載入整個頁面。

模組熱替換是在自動編譯的基礎上進行的！