webpackDevMiddleware not auto reloading

Question

So I am using the webpack dev middleware as follows:

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)

However, for some reason I am not getting live reloading. I am not getting the overlay functionality either. I am using this setup because I am using the webpackhtmlplugin.

I feel like I am missing a simple concept here :( any ideas?

Answer 1

For live reloading you also need to add the webpack-hot-middleware.

In your server you have to add:

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

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

And you also need to add 'webpack-hot-middleware/client' to your entry and the webpack.HotModuleReplacementPlugin to your plugins in your webpack config:

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

For more information see Installation & Usage.