熱模組替換的實現有兩種方式，一種是webpack-dev-server和webpack內建的HMR 外掛的結合使用；一種是利用webpack-hot-middleware中介軟體。本文記錄第二種使用方法。

一、安裝

//根據webpack版本安裝適應版本的中介軟體
npm i webpack-hot-middleware  --save-dev

二、配置

//為每個入口檔案新增熱中介軟體客戶端，以確保每個入口檔案怎麼去進行熱更新
entry[entryFileName] = [files[i],'webpack-hot-middleware/client?reload=true'
 
];

//新增外掛
plugins.push(new webpack.HotModuleReplacementPlugin());

三、啟動程式碼（dev.js）

const webpackHotMiddleware = require('webpack-hot-middleware');
let hotMiddleware = webpackHotMiddleware(compiler, {
    log: false,
    heartbeat: 2000
});
app.use(hotMiddleware);

四、scripts執行指令碼

"dev": "node dev.js"
 

五、執行

npm run dev