title: Load chunks/bundles as needed (like SystemJS)
body: <p>Using Webpack, I have multiple chunks/bundles being created so that the entire app is not loaded at once. I've hand-chosen which dependencies I want to be moved into their own chunks. Here is the important part of my config:</p>
  
  <pre><code>module.exports = {
    devtool: 'inline-source-map',
    mode: process.env.NODE_ENV,
    entry: {
      main: './src/index.tsx',
    },
    optimization: {
      runtimeChunk: {
        name: 'runtime',
      },
      splitChunks: {
        cacheGroups: {
          ...makeChunkCacheGroup('chunk_1', /\/node_modules\/(... list of deps ...)(\/|$)/),
          ...makeChunkCacheGroup('chunk_2', /\/node_modules\/(... list of deps ...)(\/|$)/),
        },
      },
    },
  // ...
  };
  
  function makeChunkCacheGroup(name, ...moduleNameRegexps) {
    return {
      [name]: {
        name,
        test: module =&gt; moduleNameRegexps.some(pattern =&gt; pattern.test(module.context)),
        chunks: 'all',
        minChunks: 1,
        minSize: 0,
        maxSize: Infinity,
        reuseExistingChunk: true,
        enforce: true,
      },
    };
  }
  </code></pre>
  
  <p>This config gives me <code>runtime</code>, <code>main</code>, <code>chunk_</code>, and <code>chunk_2</code>. However, all of these chunks are injected into <code>index.html</code>, thus they all load during the initial page load instead of dynamically (as I naively expected).</p>
  
  <p>I've used SystemJS in the past to bundle things up into multiple bundles and it would only download a given bundle as it was required by the app. I now realize that Webpack does not work this way.</p>
  
  <p>Is there a way to make Webpack only download the <code>runtime</code> and <code>main</code> bundles initially, and then download the other bundles as they're needed?</p>
  
  <hr>
  
  <p><em>Note 1:</em> I realize that I can use dynamic imports e.g. <code>import('some-dep').then(...)</code>, but it's not reasonable to do so based on the size of the codebase, and also, I think this sort of thing is better left to configuration (a module shouldn't have to pick and choose which deps it should load dynamically).</p>
  
  <p><em>Note 2:</em> I did try to specify multiple entry points but never got it working. The app really only has a single entry point. But, for instance, we have multiple directories under <code>src/app/elements/</code>, and it'd be perfect if each of those directories ended up in its own bundle which was then dynamically loaded. I couldn't get this working in an automated/smart way.</p>