DOCUMENTATION: migrating configuration from several CommonsChunkPlugin to SplitChunksPlugin

[webpack-bot]

Do you want to request a feature or report a bug?

FEATURE REQUEST: improve documentation to migrate from webpack 3 and CommonsChunkPlugin to webpack 4 and SplitChunksPlugin

What is the current behavior?

Documentation only addresses very simple cases.

What is the expected behavior?

I have a two heavy pages with loads of components called 'editor' and 'player' and a multitude of light pages with standard components essentially for input and grid. Accordingly, my webpack 3 configuration consists of an entry per page including 'editor' and 'player' and two CommonChunkPlugin:

const heavyChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
    name: 'heavy',
    filename: `[name].bundle.js?v=${pkg.version}`,
    chunks: ['editor', 'player']
});
const commonChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: `[name].bundle.js?v=${pkg.version}`,
    chunks: ['heavy', 'page1', 'page2', 'page3', 'page4', 'page5', ...],
    minChunks: 2
});

I load common.bundle.js on all pages and heavy.bundle.js only on the 'editor' and 'player' pages with the additional required components.

I have found the following way to migrate this configuration to webpack 4 and SplitChunksPlugin but this is undocumented. Is this equivalent? Any caveat?

optimization: {
    minimize: true,
    splitChunks: {
        cacheGroups: {
            heavy: {
                chunks: 'initial',
                filename: `[name].bundle.js?v=${pkg.version}`,
                minChunks: 2,
                name: 'heavy',
                reuseExistingChunk: true,
                test: (module, chunks) =>
                    chunks.length === 2 &&
                    /^(editor|player)$/.test(chunks[0].name) &&
                    /^(editor|player)$/.test(chunks[1].name)
            },
            common: {
                chunks: 'initial',
                filename: `[name].bundle.js?v=${pkg.version}`,
                minChunks: 2,
                name: 'common',
                reuseExistingChunk: true,
                test: (module, chunks) =>
                    !(
                        chunks.length === 2 &&
                        /^(editor|player)$/.test(chunks[0].name) &&
                        /^(editor|player)$/.test(chunks[1].name)
                    )
            }
        }
    }
},

If this is a feature request, what is motivation or use case for changing the behavior?

I am not the only one to struggle with this undocumented use case: see https://gitter.im/webpack/webpack?at=5ad7a325270d7d3708df7392.

It might be worth documenting...

---

This issue was moved from webpack/webpack#7085 by @montogeek. Original issue was by @jlchereau.

[tanvip]

Did anyone find solution for this?