webpack-dev-middleware 实现 hot re

webpack-dev-middleware 使得你可以不使用webpack-dev-server 而在一个已经开启的服务增加hot reloading。

安装与使用

首先，用 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));