David, thanks for this. It's an nth time I coming back to this article getting frustrated with the default behavior of webpack. I think I finally got it working, somehow previous attempts didn't yield the expected results.

I think my mistake was trying to also make this work for development with hot-loading, it was quirky.

One improvement you could make to this:

Namespaced npm modules should not be bundled together. @vendor/package-a and @vendor/package-b should end up in separate files, your script outputs them into the same file, which is not ideal.

Additionally having a single runtime chunk produces a massive output if you have many entrypoints (I am dealing with a few dozens of scss entry points, as well as several js entry points).

Here is my optimized version:

optimization: {
    runtimeChunk: true,
    splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name (module) {
                    const packageName = module.context.match(/\/node_modules\/(.*?)$/)[1].split('/');

                    if (packageName[0].startsWith('@')) {
                        return `npm.${packageName[0].replace('@', '')}.${packageName[1]}`;
                    }

                    return `npm.${packageName[0]}`;
                },
            },
        },
    },
}