有没有办法在Webpack 4中使用splitChunksPlugin手动控制将哪些模块放入哪个输出包？

我处于一种独特的情况下，我需要将我的捆绑包分解成单独的文件，但我没有随着应用程序的增长和新的依赖项的安装等而改变文件总数或文件名的奢侈

下面的配置是错误的，但我认为它将最好地说明我试图实现的目标。我已经通读了所有的文档，但似乎找不到任何与此相关的内容

optimization: {
  splitChunks: {
    react: {
      test: /node_modules\/react/
    },
    vendor: {
      test: /node_modules\/(?!react)/
    },
    svgIcons: {
      test: /src\/js\/components\/icons/
    },
  }
}

我们的目的是最终得到以下4个捆绑包：

react.bundle.js - Contains all react-related dependencies
vendor.bundle.js - Contains all other vendor files from node modules
svgIcons.bundle.js - Contains a group of app component files that match my test
bundle.js - The default bundle containing everything else.

---

有什么方法可以做到这一点吗？

经过进一步的挖掘，我终于找到了答案。基本上，这就是您需要的：

首先，在

输出

对象中

output: {
  filename: "[name].js"
}

optimization: {
  splitChunks: {
    cacheGroups: {
      react: {
        chunks: 'initial',
        name: 'react',
        test: /node_modules\/react/,
        enforce: true,
      },
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        test: /node_modules\/(?!react)/,
        enforce: true,
      },
      icons: {
        chunks: 'initial',
        name: 'icons',
        test: /src\/js\/components\/icons/,
        enforce: true,
      },
    },
  },
},

您需要

[name]

变量，否则您的捆绑包将无法获取正确的名称

接下来，在

优化
对象中

output: {
  filename: "[name].js"
}

optimization: {
  splitChunks: {
    cacheGroups: {
      react: {
        chunks: 'initial',
        name: 'react',
        test: /node_modules\/react/,
        enforce: true,
      },
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        test: /node_modules\/(?!react)/,
        enforce: true,
      },
      icons: {
        chunks: 'initial',
        name: 'icons',
        test: /src\/js\/components\/icons/,
        enforce: true,
      },
    },
  },
},

结果如下所示：

react.js
vendor.js
icons.js
bundle.js

另外请注意，您可以为“test”字段值传递函数，也可以通过文件路径进行测试：
test:path.resolve（process.cwd（），'path'，'to'，'module'，