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?

score 15 · Accepted Answer · answered Mar 15 '17 at 16:47

15

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.

answered Mar 15 '17 at 16:47

Michael Jungo

31,583
3
91
84

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 :( – Danny Fenstermaker Mar 15 '17 at 18:36
So it looks like the HMR client code needs to be included in every entry chunk in order to reload – Danny Fenstermaker Mar 15 '17 at 18:57
6

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'` – krishwader Mar 15 '17 at 21:36
@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? – Liran H Jun 27 '18 at 04:20
What if your entry field is an object, not an array? – Armster Apr 09 '21 at 00:52

webpackDevMiddleware not auto reloading

1 Answers1