Webpack4：基于入口点的两个供应商库

Question

所以，我一直在寻找，但我似乎找不到任何东西，除非我的搜索技巧最近变得更糟了。但是，我正在寻找的是能够根据入口点生成两个供应商包。

比如我有3个切入点：

编辑器
Public
授权

当用户登录时，它将包括身份验证、public 和编辑器包的变体。当用户注销时，它只会加载 public 包。这两种情况都会加载供应商包，但是当我们注销时，我不需要加载编辑器和身份验证所需的模块，所以希望有一种方法可以将其拆分给供应商和 vendor.auth，或类似的东西。

我目前仅有的优化代码如下：

optimization: {
    concatenateModules: true,
    splitChunks       : {
        cacheGroups: {
            commons: {
                test     : /[\/]node_modules[\/]/,
                name     : 'vendors',
                minChunks: 2,
                chunks   : 'all'
            }
        }
    }
},

如有任何帮助，我们将不胜感激！

谢谢

Answer 1

您可以使用 chunks property.

函数将块分成 2 个公共组

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
        chunks: function (chunk) {
          return chunk.name == 'public';
        }
      },
      auth_commons: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors.auth',
        chunks: function (chunk) {
          return ['auth', 'editor'].includes(chunk.name);
        }
      }
    }
  }
},

Webpack4：基于入口点的两个供应商库

Webpack4: Two vendor libraries based on entry points

javascript

optimization

webpack-4