webpack-dev-middleware 实现 hot re

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

1. 在 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()
]

2. 添加 webpack-hot-middleware/client 到每一个 entry 的数组。当某个bundle rebuild ，链接服务端的 connects 会对应的通知浏览器端。

最后，把 middleware 添加到你的server

1. 像往常一样添加 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
}));

2. 把webpack-hot-middleware 附加到同一个 compiler 实例

app.use(require("webpack-hot-middleware")(compiler));