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