Webpack - How to create independent entry point (ignore cacheGroups settings)?

Question

In my webpack config I created 2 cache groups, "vendors" and "common".

        entry: {
            'entry1': './src/entry1.js',
            'entry2_independent': './src/entry2_independent.js',
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendors: {
                        minChunks: 30,
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        priority: -10,
                        chunks: 'initial'
                    },
                    default: {
                        minChunks: 30,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true,
                        name: 'common'
                    }
                }
            }
        },

I want one of my entry points to be independent. It should include all its dependencies without being depndent on common.js or vendors.js.

To be more specific, I want all entry points with '_independent' in their name, to be independent.

I still want to preserve the optimization logic. If a module is used in 30 chunks, I still want it to be part of the 'common' layer.

How can I do it?

Thanks!

Answer 1

I ended up exporting 2 configs. One which has common layer (common/vendors) and another which creates independent/standalone bundles:

module.exports = function (env) {

    const baseConfig = {
        mode: env.development ? 'development' : 'production',
        devtool: 'source-map',
        watch: !!env.development,
        output: {
            path: path.resolve(__dirname, CONSTS.DIST),
            filename: '[name].js',
            chunkFilename: '[name].js',
            publicPath: '/dist/scripts/',
            globalObject: 'this',
        }
    };

    const clientConfig = Object.assign({}, baseConfig, {
        entry: {
            'client-entry1': './src/entry1.js',
            'client-entry2': './src/entry2.js',
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendors: {
                        minChunks: 30,
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        priority: -10,
                        chunks: 'initial'
                    },
                    default: {
                        minChunks: 30,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true,
                        name: 'common'
                    }
                }
            }
        }
    });

    const serverConfig = Object.assign({}, baseConfig, {
        entry: {
            'independent-bundle1': './src/entry1_independent.js',
            'independent-bundle2': './src/entry2_independent.js',
        }
    });

    return [clientConfig, serverConfig];
};

If somebody have a better solution which doesn't require 2 different configs, please share :)