时间戳

首页 > 解决方案 > 根据入口点生成 splitChunks 名称

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

问题描述

我有以下（缩短的）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 个文件：

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

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

可能吗 ？

标签： webpackwebpack-4

解决方案

假设我们有两个文件：

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
  • 管理员.js
  • vendor.admin.js（仅限lodash）
  • vendor.common.js（仅限jquery ）

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

最强大和最简单的解决方案是动态导入，我强烈建议考虑它，而不是这个解决方案。您将获得对依赖项的更多控制，并且能够更细化地拆分代码。

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

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

推荐阅读