splitting chunks requires all files to be loaded in index file

I've been using some code from this article regarding chunk splitting with webpack. https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

I have a very simple React module that I'm testing out Rollup and Webpack bundling on.

import React from 'react';
import { render } from 'react-dom';

render(<div>hello world</div>, document.getElementById('root'));
console.log('hello');

I'm hoping to build out on this and add additional modules to test these two bundlers out.

With the optimization setting in Webpack below, I'm able to split my bundle into a number of chunks.

  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)![1];
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js',
  },

This will split out my bundle into several files. What I'm expecting to happen is to have a main bundle file that I can include in my index.html file, which will load in the rest of the chunks, but that doesn't work. I have to load in every single bundle file like this:

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="main.chunk.js"></script>
    <script src="npm.object-assign.chunk.js"></script>
    <script src="npm.react-dom.chunk.js"></script>
    <script src="npm.react.chunk.js"></script>
    <script src="npm.scheduler.chunk.js"></script>
    <script src="runtime.bundle.js"></script>
  </body>
</html>

Based on the file names of these chunks I would expect this to work, but it doesn't:

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="runtime.bundle.js"></script>
  </body>
</html>

I've used this Webpack config with actual projects and haven't had any issues like this before. Am I not correctly specifying the config's bundle output?