webpackDevMiddleware 不会自动重新加载

Question

所以我使用webpack dev中间件如下：

const compiledWebpack = webpack(config),
          app             = express(),
          devMiddleware   = webpackDevMiddleware(compiledWebpack, {
            historyApiFallback: true,
            publicPath: config.output.publicPath,
            overlay: {
              warnings: true,
              errors: true
            },
            compress: true,
            stats: { colors: true }
          })


    app.use(devMiddleware)




    app.get('*', (req, res) => {
      // Here is it! Get the index.html from the fileSystem
      const htmlBuffer = devMiddleware.fileSystem.readFileSync(`${config.output.path}/index.html`)

      res.send(htmlBuffer.toString())
    })

    app.listen(PORT, function () {})

    console.log('Running on port ' + PORT)

但是，出于某种原因，我无法实时重新加载。我也没有获得覆盖功能。我正在使用此设置，因为我正在使用 webpackhtmlplugin。

我觉得我在这里缺少一个简单的概念:(有什么想法吗？

Answer 1

对于实时重新加载，您还需要添加 webpack-hot-middleware。

在您的服务器中您必须添加：

const webpackHotMiddleware = require('webpack-hot-middleware');

const hotMiddleware = webpackHotMiddleware(compiledWebpack);
app.use(hotMiddleware);

并且您还需要在您的条目中添加 'webpack-hot-middleware/client' 并在您的 webpack 配置中添加 webpack.HotModuleReplacementPlugin 到您的插件：

entry: [
  'webpack-hot-middleware/client',
  './src/index.js' // Your entry point
],
plugins: [
  new webpack.HotModuleReplacementPlugin()
]

有关详细信息，请参阅 Installation & Usage。

webpackDevMiddleware 不会自动重新加载

webpackDevMiddleware not auto reloading

javascript

express

webpack

html-webpack-plugin

webpack-dev-middleware