webpack-hot-dev-clients

webpack-hot-dev-clients form react-dev-utils.

This alternative WebpackDevServer combines the functionality of:

1. It only supports their simplest configuration (hot updates on same server).
2. It makes some opinionated choices on top, like adding a syntax error overlay that looks similar to our console output.

It currently supports only Webpack 3.x above.

1npm i webpack-hot-dev-clients

Webpack development config

1module.exports = {
2  entry: [
3    // You can replace the line below with these two lines if you prefer the
4    // stock client:
5    // require.resolve('webpack-dev-server/client') + '?/',
6    // require.resolve('webpack/hot/dev-server'),
7+   require.resolve('webpack-hot-dev-clients/webpackHotDevClient'),
8    "./src/index.js"
9  ],
10  devtool: 'inline-source-map',
11  devServer: {
12    contentBase: './dist',
13+    hot: true
14  },
15  plugins: [
16    new HtmlWebpackPlugin({
17      title: 'Hot Module Replacement'
18    }),
19+    new webpack.NamedModulesPlugin(),
20+    new webpack.HotModuleReplacementPlugin()
21  ],
22  output: {
23    filename: '[name].bundle.js',
24    path: path.resolve(__dirname, 'dist')
25  }
26};