Webpack - 如何创建独立的入口点（忽略cacheGroups设置）？

Question

在我的 webpack 配置中，我创建了 2 个缓存组：“vendors”和“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'
                    }
                }
            }
        },

我希望我的入口点之一是独立的。它应该包含所有依赖项，而不依赖于 common.js 或vendors.js。

更具体地说，我希望名称中带有“_independent”的所有入口点都是独立的。

我仍然想保留优化逻辑。如果一个模块使用了 30 个块，我仍然希望它成为“公共”层的一部分。

我该怎么做？

谢谢！

Answer 1

我最终导出了 2 个配置。一个具有公共层（公共/供应商），另一个创建独立/独立的捆绑包：

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];
};

如果有人有更好的解决方案，不需要 2 个不同的配置，请分享:)