I have a .NET project where I'm trying to use Webpack's code-splitting functionality.

My Webpack output (the relevant part) looks like this:

{
    output: {
        path: resolve(__dirname, config.path.public),
        pathinfo: false,
        filename: 'js/[name].js',
        chunkFilename: 'js/[name].js',
        publicPath: '/'
    },
}

My bundle config looks something like this:

private void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/js").Include(
        "~/assets/store/js/vendor.js",
        "~/assets/store/js/index.js",
        "~/assets/marketing/js/index-prod.js"));
}

When I build the front-end, Webpack generates several JS chunks: index.js, index-prod.js, 2.js, 3.js, 4.js, etc. So, the code-splitting seems to be working. However, when I fire up my browser, the pages are mostly blank, and I see an error stating that it couldn't find the source for 4.js. So it seems that the app can't find the correct path. Note that everything was working before I tried to implement code-splitting. I thought that simply specifying index.js/index-prod.js in the bundle would be sufficient, and that it would dynamically/lazy-load components (i.e. the chunks) on user interaction.

What am I doing wrong? I don't want the bundler to concatenate all the chunks (which would defeat the purpose of chunking them). And ideally, I shouldn't have to manually add each chunk file to the bundle.