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

Question

我处于一种独特的情况，我需要将我的捆绑包分解成单独的文件，但我没有奢侈地让文件总数或这些文件的名称随着时间的推移而变化应用程序增长并安装新的依赖项等

以下配置是错误的，但我认为它最能说明我正在尝试要完成的任务。我已经通读了所有文档，但似乎找不到任何相关内容。

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.

有办法吗？

Answer 1

经过更多的挖掘，我终于弄明白了。本质上，这就是您所需要的：

首先，在output对象中...

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

您需要 [name] 变量，否则您的包将无法选择正确的名称。

接下来，在 optimization 对象中...

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

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

Is there a way to use splitChunksPlugin in Webpack 4 to manually control which modules get placed into which output bundles?

webpack

webpack-4

webpack-splitchunks