How to load chunks from entry script using webpack?

I'm trying to split node_modules dependencies into a separate chunk for which I used splitChunks feature of webpack.

splitChunks: {
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/
      name: 'vendors',
      chunks: (chunk) => chunk.name === 'index' ? 'all' : false,
    },
  },
},

However, it adds the chunks as separate scripts

<script defer src="vendors.js"></script>
<script defer src="index.js"></script>

What I want is a single entry script which then loads vendors.js asynchronously as required, i.e.

<!-- index.js loads vendors.js as needed -->
<script defer src="index.js"></script>

How can I achieve this?