webpack - 根据入口点生成 splitChunks 名称

Question

我有以下(简化的)webpack 配置:

module.exports = {
    entry: {
        app: "./app/index.ts",
        admin: "./app/index-admin.ts"
    },
    ...,
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    }
}

结果是生成了 3 个文件:

• app.min.js
• admin.min.js
• vendors.min.js

我的问题是“vendors.min.js”为两个入口点生成一次。此配置背后的想法是两个入口点将完全相同，但在“index-admin.ts”中，我将引用其他库，例如 tinyMce 或其他东西。

因此，我想生成 4 个文件:

• app.min.js
• admin.min.js
• app.vendors.min.js
• admin.vendors.min.js

这可能吗？

Answer 1

假设我们有两个文件:

index.js

import 'jquery';

index-admin.js

import 'jquery';
import 'lodash';

例如，我们只想将 lodash 用于管理部分，并将其从主应用程序中分离出来。这是可能的解决方案:

module.exports = {
    entry: {
        app: "./app/index.js",
        admin: "./app/index-admin.js",
    },
    optimization: {            
        splitChunks: {
            chunks: 'all', // enable default cache groups, also this value will be inherited by the child groups
            cacheGroups: {
                // vendors is a default group, here we're overriding its configuration
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors.common",
                    // when you define your own group, its priority is 0, so you need to reset it to the default (or simply a negative) value for vendors
                    priority: -10
                },
                vendorsAdmin: {
                    // could be replaced with a function for the more complex scenario `function (module, chunk)`
                    test: /[\\/]lodash[\\/]/,
                    name: "vendors.admin",
                    // disable minSize/maxSize/minChunks/maxAsyncRequests/maxInitialRequests policies for this group
                    enforce: true,
                }
            }
        }
    }
};

结果，我们得到如下文件结构:

• 应用程序.js
• admin.js
• vendors.admin.js(lodash 仅)
• vendors.common.js(jquery 仅)

就这么简单。但是此解决方案稍后可能会导致奇怪的行为。例如，您团队中的某个人从应用程序包中引用了 lodash。构建后 bundle 结构不会改变，但现在 app.js 依赖于 vendors.admin.js。因此，当 webpack list 尝试引导您的应用程序时，它将开始等待加载 vendors.admin.js，但那永远不会发生。

最可靠、最简单的解决方案是 dynamic imports我强烈建议考虑它，而不是这个解决方案。您将更好地控制依赖项，并且能够更细粒度地拆分代码。

如果你不想自己控制打包过程，看起来你可以依赖默认的拆分策略。对于我的示例，它将输出与之前配置中相同的结果。

optimization: {
    splitChunks: {            
        chunks: 'all'            
    }
}