Webpack CommonsChunkPlugin migration with 2 named commons chunks, 50+ entries

We're finally working on transitioning our code-base to Webpack 4, but are having some troubles replicating the setups we currently have with CommonsChunkPlugin and using the new splitChunks options. Our webpack build looks something like this:

const config = {
    entry: {
        vendor: [
            'jquery',
            './libs/global',
            './css/forms.css'
            // ...
        ],
        angular: [
            'angular-timeago',
            'angular-cookies',
            'angular-messages',
            'angular-sanitize',
            'angular-animate',
            './libs/angular-common',
            // ...
        ],
        app1: ['./apps/app1/app'],
        app2: ['./apps/app2/app'],
        app3: ['./apps/app3/app'],
        app4: ['./apps/app4/app'],
        appWithoutAngular: ['./apps/app5/app'],
        app2WithoutAngular: ['./apps/app6/app'],
        // ... (50+ entries, some angular, some not)
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'angular',
            chunks: _.without(_.keys(config.entry), 'vendor', 'appWithoutAngular', 'app2WithoutAngular'), // all non-angular entry points
            minChunks: 2
        }))
    ]
}

The concept is that we include the vendor bundle on every page on our website, plus any other entires, and then on pages that need angular, we also include the angular bundle, and any other entries needed. We don't load any chunks asynchronously and haven't found a good configuration for doing this.

We've attempted the following:

config.optimization = {
    splitChunks: {
        cacheGroups: {
            default: false,
            vendors: false,
            vendor: {
                chunks: 'initial',
                priority: 10,
                name: 'vendor_test',
                reuseExistingChunk: true
            },
            angular: {
                chunks: 'initial',
                minChunks: 2,
                name: 'angular_test',
                enforce: true,
                reuseExistingChunk: true,
                test: function(module, chunks){
                    return chunks.some(function(chunk){
                        return nonAngularChunks.includes(chunk.name);
                    });
                }
            }
        }
    }
};

But that seems to generate a 3+MB vendor_test chunk (we're used to about 100kb), and no angular_test chunk whatsoever. Ideally, and as how it worked in Webpack 3, we'd want to replace the vendor and angular entry points with the necessary dependencies, as determined by all of our non-angular chunks, and then angular chunks, respectively.

I've still not found a way to accomplish this with Webpack 4, and am hoping to find a solution soon.

from Webpack CommonsChunkPlugin migration with 2 named commons chunks, 50+ entries