與 webpack-dev-middleware 一起使用

通過 npm 安裝 webpack-dev-middleware

npm i -D webpack-dev-middleware webpack-hot-middleware

修改 webpack.config.js

• 將 webpack-hot-middleware/client 新增到 entry 中定義的每個專案

• 將 new webpack.HotModuleReplacementPlugin() 新增到 plugins

  module.exports = {
      entry: {
          js: [
              './index.js',
              'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'
          ]
      },
      plugins: [
          new webpack.HotModuleReplacementPlugin()
      ]
  };
  

將這些新增到 index.js

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

var config = require('./webpack.config.js');
var compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath,
    stats: { colors: true },
    watchOptions: {
        aggregateTimeout: 300,
        poll: true
    },
}));

app.use(webpackHotMiddleware(compiler, {
    log: console.log,
}));