title: Adding HMR for multiple HtmlWebpackPlugin outputs in webpack
body: <p>I am trying to add HMR to my existing project. So let's start with how the things are managed currently.</p>
  
  <p>I have multiple HTML files that needs to be served at different routes. So for <code>/about</code> page, I have about.html that needs to be served, along with the whole react app javascript. So this is how my current code looks like:</p>
  
  <p>In <code>webpack.config.js</code>, I'm using HtmlWebpackPlugin for adding title and js files with their chunkhash.</p>
  
  <pre><code>new HtmlWebpackPlugin({
    title: `Welcome to my app`,
    template: './build/index.html',
  }),
  new HtmlWebpackPlugin({
    title: `Welcome to my app`,
    filename: 'about.html',
    template: './build/about.html',
  }),
  new HtmlWebpackPlugin({
    title: `Welcome to my app`,
    filename: 'base.html',
    template: './build/base.html',
  }),
  new webpack.HotModuleReplacementPlugin(),
  </code></pre>
  
  <p>This is how "output" in webpack config looks like. I have publicPath set to '/'.</p>
  
  <pre><code>  output: {
      path: path.resolve(__dirname, '..', 'build'),
      publicPath: '/',
      filename: 'js/[name]-[hash].js',
    },
  </code></pre>
  
  <p>And this is how my server.js file looks like, where i'm using the webpack-dev-middleware and webpack-hot-middleware.</p>
  
  <pre><code>const compiler = require('webpack')(webpackConfig);
  app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    colors: true,
  }));
  
  app.use(require('webpack-hot-middleware')(compiler, {
    quiet: true,
    noInfo: true,
    log: console.log,
    path: '/__webpack_hmr',
  }));
  </code></pre>
  
  <p>And this is how i'm serving the HTML files:</p>
  
  <pre><code>app.get('/', (req, res) =&gt; res.sendFile(path.join(__dirname, '/../build/index.html')));
  app.get('/about', (req, res) =&gt; res.sendFile(path.join(__dirname, '/../build/about.html')));
  app.get('/status', (req, res) =&gt; res.send('Status OK'));
  app.get('*', (req, res) =&gt; res.sendFile(path.join(__dirname, '/../build/base.html')));
  </code></pre>
  
  <p>Now, When I open the <code>/</code> of the route, Everything works great along with HMR. But whenever I open <code>/about</code> or <code>/anything</code>, the about.html or base.html loads, but there's no app script added to that.</p>
  
  <p>Why is it working for the index route and not other routes ? Thanks for your help :)</p>