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?

Pita

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.

Otorhinolaryngology

So this seems to help, however, I am not getting it to actually reload yet. I am seeing HMR outputting in the chrome console that the bundle was reloaded but I still am having to refresh manually to see the changes :( – Pita

So it looks like the HMR client code needs to be included in every entry chunk in order to reload – Pita

I'd like to add that, if you'd like to reloading to happen automatically whenever HMR is unable to trigger itself ON (like, when console says "Full refresh needed"), make sure to add ?reload=true at the end of the webpack entry that points to 'webpack-hot-middleware/client' – Bland

@krishgopinath, that sorts out JS live reloading, thank you very much! However, my SCSS still doesn't live-reload. Any idea how to get that working as well? – Hodgepodge

What if your entry field is an object, not an array? – Cf