3

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)
  })
}
Igor-Vuk
  • 3,551
  • 7
  • 30
  • 65

1 Answers1

2

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.

Tim Dorr
  • 4,861
  • 2
  • 21
  • 24
  • 1
    Hi Tim. Thanks for the answer. I made a try app with webpack-dev-middleware and webpack-hot-middleware and I didn't like it at all. Every time I changed something on the server my client bundle needed to be rebuild even though I implemented HMR and it was updating the backend without server restart. Everything was working but there was too many hickups with joggling two bundles. It was fine with some smaller apps without much of a backend logic. After I divided it to two bundles and 2 servers everything was working nicer. Just need to figure it out how to hot swap now without devServer. – Igor-Vuk Jun 07 '17 at 21:06