Webpack 供应商捆绑拆分答案

【问题标题】：Webpack vendor bundle splittingWebpack 供应商捆绑拆分
【发布时间】：2022-07-10 17:07:07
【问题描述】：

已经做了几个小时的谷歌搜索和实验，但我很困惑，所以这里有一个悬而未决的问题：

如何将我的 webpack 5 供应商捆绑包分成两部分？

具体来说，我想要：

vendors.bundle.js
otherpackage.bundle.js

即想象我的 node_modules 文件夹如下所示：

├── bootstrap
├── tinymce
├── anotherpackage
├── anotherpackage2

我期望的是 1 个包含除 tinymce 之外的所有内容的捆绑包，然后是另一个仅包含 tinymce 的捆绑包。

到目前为止我已经尝试过：

optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            // chunks: "all",  // If this is set my bundles in vendor get split into a million separate bundles
            // maxInitialRequests: Infinity,
            // minSize: 0,
            cacheGroups: {
                tinymceVendor: {
                    test: /[\\/]node_modules[\\/](tinymce)[\\/]/,
                    name: 'tinymce',
                    priority: 10,
                    chunks: "all",
                },
                commons: {
                    test: /[\\/](node_modules)[\\/](!tinymce)[\\/]/,
                    name: 'vendors',
                    chunks: "all",
                }
            }
        },
    },

【问题讨论】：

标签： webpack bundler bundling-and-minification webpack-5

【解决方案1】：

这对我来说是有效的。请记住，我的项目中有 webpack 4，因此可能需要进行一些调整。

 optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    cacheGroups: {
     vendor: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendors',
      chunks: 'all',
    },
   },
 },
},

【讨论】：