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

Question

所以,我一直在打猎,除非我的搜索技能最近变得更糟,否则我似乎找不到任何东西.但是,我正在寻找的是能够根据入口点生成两个供应商捆绑包.

例如,我有3个入口点:

• 编辑
• 上市
• 验证

当用户登录时,它将包含auth,public和editor包的变体.当用户注销时,它只会加载公共包.这两种情况都会加载供应商捆绑包,但是当我们注销时,我不需要加载编辑器和auth所需的模块,因此希望有一种方法可以将其拆分为供应商和vendor.auth或类似的东西.

我目前唯一的优化代码如下:

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

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

谢谢

Answer 1

chunks您可以使用函数作为属性将块分成 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);
        }
      }
    }
  }
},