webpack之热模块替换(七)

热模块替换的实现有两种方式，一种是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

六、webpack-hot-middleware官方介绍：https://github.com/glenjamin/webpack-hot-middleware