webpack-dev-middleware 使得你可以不使用webpack-dev-server 而在一个已经开启的服务增加hot reloading。
webpack-dev-middleware 只 关注客户端和webpack server之间的连接，以及接收更新。它会订阅服务端的变化，然后使用 webpack's HMR API去执行这些变化，事实上使得你的应用能使用hot reloading 去做无刷新的改变，不在 webpack-dev-middleware 的能力范畴，这可以通过其他库解决。
如果你使用 React, 那么一般的解决方案是 react-transform-hmr 以及 react-hot-loader（这里请参考译者另外一篇文章）
安装与使用
首先，用 npm 安装包
npm install --save-dev- webpack-hot-middleware
然后，在你的webpack配置文件里面开启 hot reloading
- 在
plugins里面增加下面 plugins
plugins: [
// OccurenceOrderPlugin is needed for webpack 1.x only
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
// Use NoErrorsPlugin for webpack 1.x
new webpack.NoEmitOnErrorsPlugin()
]
- 添加
webpack-hot-middleware/client到每一个entry的数组。当某个bundle rebuild ，链接服务端的 connects 会对应的通知浏览器端。
最后，把 middleware 添加到你的server
- 像往常一样添加
webpack-dev-middleware
var webpack = require('webpack');
var webpackConfig = require('./webpack.config');
var compiler = webpack(webpackConfig);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath
}));
- 把
webpack-hot-middleware附加到同一个 compiler 实例
app.use(require("webpack-hot-middleware")(compiler));