Using webpack HMR (Hot Module replacement) without the webpack-dev-server

Question

I implemented the HMR with webpack and it works ok. When I change something I see in the console that it has updated but since I am using it for the server bundle I was wondering hot to send signal to browser to reload after HMR finishes, or better yet, how to do hot swap without refreshing the browser?

It works normally on client side where I use webpack-dev-server but on the server side where I use webpack/hot/poll I need to manually refresh after every change to see it in the browser?

webpack.config.server.js

module.exports = {
  ...
  watch: true,
  target: 'node',
  node: {
    __dirname: true,
    __filename: true
  },
  entry: {
    bundle: [
      'webpack/hot/poll?1000',
      './src/server/devServer'
    ]
  },
  output: {
    path: path.join(__dirname, 'src', 'build'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      CountdownForm: path.resolve(__dirname, 'src/client/scenes/countdown/components/CountdownForm.jsx'),
     ...
    }
  },
  externals: [nodeExternals({
    whitelist: ['webpack/hot/poll?1000']
  })],
 ...
  plugins: [
    new StartServerPlugin('bundle.js'),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      title: 'React Timer',
      template: 'ejs-loader!./src/server/views/index.ejs'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    })
  ]
}

devServer

const server = http.createServer(app)
let currentApp = app

server.listen(PORT, () => {
  console.log(`
  Express server is up on port ${PORT}
  Development environment - Webpack HMR active
  `)
})

if (module.hot) {
  module.hot.accept('./index', () => {
    server.removeListener('request', currentApp)
    currentApp = app
    server.on('request', app)
  })
}

Answer 1

webpack-dev-server sets up a server that will transmit changes to any listening client. If you're writing your own server application, it won't be a client of the webpack server. Instead, you'll want to add webpack to the server so your client can connect to it and get updates. You'll need two things for this:

https://github.com/webpack/webpack-dev-middleware
https://github.com/glenjamin/webpack-hot-middleware

The first allows webpack to bundle your code and serve it up from your server app. The second allows it to transmit HMR updates to the client.

Note: webpack-dev-server actually uses webpack-dev-middleware internally. It's basically just a pre-configured version of the middleware.