webpackwebpack-4bundling-and-minificationwebpack-5

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


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!


Solution

  • 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 :)