Webpack 4 - What is the splitChunks equivalent to minChunk: Infinity

1.3k Views Asked by At

In webpack 3, we used to be able to have a dependency, and all of it's dependencies grouped together in a "common chunk" by using:

    new webpack.optimize.CommonsChunkPlugin({
        name: 'common-init',
        minChunks: Infinity
    })

In Webpack 4, you need to use splitChunks. However, everything now is based on the minChunk and test, which doesn't support "Infinity" and if you wanted to get something "similar" to the above, you'd now need to use the "test" like below, so that another "cacheGroup" doesn't bundle those dependencies up:

    cacheGroups: {
            'common-init' : {
                name: 'common-init',
                chunks: 'initial',
                minChunks: 2,
                enforce : true,
                priority : 10,
                test : /common|somedepInit.js|analyticsDep|otherDepInit/
            },
            'resources': {
                name: 'resources',
                chunks: 'initial',
                minChunks: 2,
                test: /resources/
            }
    }

While this is technically a solution I can use, using Infinity required much less code to enforce certain dependencies ended up in a very specific "common chunk".

Is there a better way to achieve the same in Webpack 4?

1

There are 1 best solutions below

0
On

This ended up working for me:

           'common-init' : {
            name: 'common-init',
            chunks: 'initial',
            minChunks: 2,
            enforce : true,
            priority : 10,
            test: (module, chunks) => chunks.some(({ name }) => name === 'common-init')
        },