title: html-webpack-plugin multiple entry points adding all scripts
body: <p>I'm building a project on an ejected react cli. The reason I ejected it is because there will be multiple pages being generated and some stand alone scripts that I wanted to make and have them take advantage of the ES6 and debugging tools provided by the boilerplate.</p>
  
  <p>My problem is that while using the <a href="https://github.com/jantimon/html-webpack-plugin/issues/218#issuecomment-183066602" rel="noreferrer">technique</a> to build out multiple pages with  <code>html-webpack-plugin</code> builds out the generated HTML files with both scripts from each page.</p>
  
  <p>So, lets have a look at the basic entry point</p>
  
  <p>Here's my basic web pack config.</p>
  
  <pre><code>...
  entry: {
  
        devServerClient : require.resolve('react-dev-utils/webpackHotDevClient'),
        // Finally, this is your app's code:
        ...pages,
  
      },
  ...
  </code></pre>
  
  <p>As you can see, I'm using the same hot module reloading stuff that came with the boiler plate, but then I deviate to spread in values from the pages variable which is being required from another page:</p>
  
  <pre><code>const glob = require("glob");
  const path = require("path");
  
  const input_path = path.resolve(__dirname, "../src/apps/*/index.js");
  const apps_directories = glob.sync(input_path);
  
  let pages = {};
  
  // Loop through them and append them to the pages object for processing.
  apps_directories.map(function (app_directory) {
      const split_name = app_directory.split("/");
      pages[split_name[split_name.length - 2]] = app_directory;
  });
  
  module.exports = pages;
  </code></pre>
  
  <p>Thats how I generate multiple entries dynamically. This portion of the code works fine, but I thought I'd post it just in case something needs to happen here that I'm missing.</p>
  
  <p>Next We have the actual plugin section. I take a similar approach in modularizing the code, so here's that portion in the config (root level of the web pack object):</p>
  
  <pre><code>...
  plugins: [
      // Generates an `index.html` file with the &lt;script&gt; injected.
      ...HtmlWebpackPlugins,
      ...
  ]
  ...
  </code></pre>
  
  <p>Again, I spread them in, the script that generates these looks like so:</p>
  
  <pre><code>const HtmlWebpackPlugin = require('html-webpack-plugin');
  const pages = require("./multiplePaths");
  const paths = require("./paths");
  
  const NODE_ENV = process.env.NODE_ENV;
  
  let HtmlWebpackPlugins = [];
  
  Object.keys(pages).map(function (fileName) {
      if (NODE_ENV === "development") {
          HtmlWebpackPlugins.push( new HtmlWebpackPlugin({
              inject: true,
              template: paths.appHtml,
              filename: `${fileName}.html`,
          }));
          return;
      }
  
      HtmlWebpackPlugins.push(new HtmlWebpackPlugin({
          inject: true,
          template: paths.appHtml,
          filename:  `${fileName}.html`,
          minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
          },
      }));
  });
  
  module.exports = HtmlWebpackPlugins;
  </code></pre>
  
  <p>This script here generates the multiple instances of the <code>HtmlWebpackPlugin</code> class per entry, and we also name the html file based on the folder the name of the folder the app resides in. This satisfies the <a href="https://github.com/jantimon/html-webpack-plugin/issues/218#issuecomment-183066602" rel="noreferrer">technique</a> in their issues section.</p>
  
  <p>The problem then happens in the generated HTML page. Notice that the scripts for all the folders are injected in each app:</p>
  
  <p><a href="https://i.stack.imgur.com/uOwH3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uOwH3.png" alt="enter image description here"></a></p>
  
  <p>As you can see, each app's CSS and JS are added. This happens to both pages. I only want the relevant CSS and JS to each page.</p>
  
  <p>Any idea what's going on here?</p>