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

Question

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

例如，我有三个入口点：

• 编辑器
• 公共的
• 身份验证

当用户登录时，它将包括auth、public和编辑器包的一个变体。当用户被注销时，它将只加载公共包。这两种情况都将加载一个供应商包，但当我们注销时，我不需要加载编辑器中所需的模块，因此auth希望有一种方法将其拆分给供应商和vendor.auth，或者类似的东西。

我目前唯一需要优化的代码是：

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

这里的任何帮助都将不胜感激！

谢谢

Answer 1

您可以使用 property这样的函数将这些块分成两个常见的组。

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