Webpack: how to use CommonsChunkPlugin with multiple splitted bundles

Question

I have two independent parts of application that both splitted to 'app' and 'vendor' bundles.

Webpack entries:

entry: {
    'client-app': path.join(BASE_DIR, 'front-end-sources', 'client', 'scripts', 'main.ls'),
    'client-vendor': path.join(BASE_DIR, 'front-end-sources', 'client', 'scripts', 'vendor.ls'),
    'admin-app': path.join(BASE_DIR, 'front-end-sources', 'admin', 'scripts', 'main.ls'),
    'admin-vendor': path.join(BASE_DIR, 'front-end-sources', 'admin', 'scripts', 'vendor.ls')
},

And plugins:

plugins: [
    new ExtractTextPlugin('[name].bundle.css'),
    new webpack.optimize.CommonsChunkPlugin({
        names: ['client-app', 'client-vendor'],
        minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({
        names: ['admin-app', 'admin-vendor'],
        minChunks: Infinity
    })
]

With just 'client-app' and 'client-vendor' or 'admin-app' and 'admin-vendor' and single CommonsChunkPlugin it works perfect, it generates 2 bundles (app & vendor) but with this pairs it fails with error:

ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (admin-app)
ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (admin-vendor)

How I can do it right?

Answer 1

I had the same requirement and solved it by splitting the config into two and supplying module.exports with an array.

module.exports = [{
    entry: {
        'client-app': path.join(BASE_DIR, 'front-end-sources', 'client', 'scripts', 'main.ls'),
        'client-vendor': path.join(BASE_DIR, 'front-end-sources', 'client', 'scripts', 'vendor.ls')
    },
    ...
    plugins: [
        new ExtractTextPlugin('[name].bundle.css'),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['client-app', 'client-vendor'],
            minChunks: Infinity
        })
   ]
},
{
    entry: {
        'admin-app': path.join(BASE_DIR, 'front-end-sources', 'admin', 'scripts', 'main.ls'),
        'admin-vendor': path.join(BASE_DIR, 'front-end-sources', 'admin', 'scripts', 'vendor.ls')
    },
    ...
    plugins: [
        new ExtractTextPlugin('[name].bundle.css'),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['admin-app', 'admin-vendor'],
            minChunks: Infinity
        })
   ]

}]