title: how to configure webpack HMR with express
body: <p><strong>package.json</strong> scripts:</p>
  
  <pre><code> "scripts": {
      "build": "webpack --config config/webpack.prod.config.js",
      "dev": "webpack --config config/webpack.dev.config.js &amp;&amp; nodemon ./dist/server.js",
      "start": "nodemon ./dist/server.js"
    }
  </code></pre>
  
  <p>and this is main file:</p>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>import express from "express";
  import webpack from 'webpack';
  import webpackDevMiddleware from 'webpack-dev-middleware';
  import webpackHotMiddleware from 'webpack-hot-middleware';
  import config from './config/webpack.dev.config';
  
  const app = express();
  const compiler = webpack(config);
  
  app.get("/", (req, res) =&gt; {
      res.send("Hello");
  });
  
  app.use(webpackDevMiddleware(compiler, {
      publicPath: config.output.publicPath
  }));
  
  app.use(webpackHotMiddleware(compiler));
  
  app.listen(4000, () =&gt; console.log("Listening to port 4000"))
  </code></pre>
  
  <p>my <code>webpack</code> config divided in three files:</p>
  
  <ul>
  <li>config/webpack.common.config.js</li>
  <li>config/webpack.dev.config.js</li>
  <li>config/webpack.prod.config.js</li>
  </ul>
  
  <p>this is webpack common config:</p>
  
  <p><strong>webpack.common.config.js</strong></p>
  
  <pre><code>module.exports = {
      entry: {
          server: './server.js'
      },
      output: {
          path: path.join(__dirname, '../dist'),
          publicPath: "/",
          filename: '[name].js'
      },
      target: 'node',
      externals: [new nodeExternals()],
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: "babel-loader"
                  }
              }
          ]
      },
      plugins: [
          new CleanWebpackPlugin()
      ]
  }
  </code></pre>
  
  <p>this is webpack dev config:</p>
  
  <p><strong>webpack.dev.config.js</strong></p>
  
  <pre><code>module.exports = merge(common, {
      entry: {
          server: ['webpack-hot-middleware/client?path=/__webpack_hmr&amp;timeout=20000', './server.js']
      },
      mode: 'development',
      plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoEmitOnErrorsPlugin()
      ]
  })
  </code></pre>
  
  <p>this is webpack dev config:</p>
  
  <p><strong>webpack.prod.config.js</strong></p>
  
  <pre><code>module.exports = merge(common, {
      mode: 'production'
  });
  </code></pre>
  
  <p>finally this is the error:</p>
  
  <p><a href="https://i.stack.imgur.com/Uk0LU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uk0LU.jpg" alt="error"></a></p>
  
  <p>what is the problem? how to config the hot reload in webpack and express?</p>