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

结果，我们得到以下文件结构：

app.js
admin.js
vendors.admin.js（仅破折号仅）
vendors.common.js（仅 jquery ）

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

最强大，最简单的解决方案是dynamic imports，我强烈建议您考虑使用它，而不是此解决方案。您将对依赖项有更多的控制权，并且能够将您的代码拆分得更细。

如果您不想自己控制捆绑过程，则似乎可以依靠默认的拆分策略。对于我的示例，它将输出与先前配置相同的结果。

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

根据入口点生成splitChunks名称

1 个答案: