Question

我正在尝试使用Webpack 4 Split Chunks插件创建多个供应商捆绑包。在这种情况下，我想为react / react-dom创建一个块，为react-router / react-router-dom创建一个块。

当cacheGroups仅包含react和vendor时，构建将按预期工作。捆绑软件输出为：

- index
- react
- runtime
- vendors

同样，如果我只有router和vendor的cacheGroups，它将按预期工作。输出为：

- index
- router
- runtime
- vendors

在创建块的两种情况下，检查都会分别显示react或router的正确代码。

但... 不能同时使用-在这种情况下，仅创建router块，并将react代码压入索引（src）捆绑包。

我怀疑正则表达式模式中有什么问题导致先前的cacheGroup无效？任何帮助表示赞赏。

这是我的splitChunks的webpack配置：

splitChunks: {
  cacheGroups: {
    react: {
      test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
      name: 'react',
      chunks: 'all'
    },
    router: {
      test: /[\\/]node_modules[\\/](react-router|react-router-dom)[\\/]/,
      name: 'router',
      chunks: 'all'
    },
    vendor: {
      test(mod) {
        // exclude anything outside node modules
        if (!mod.context.includes('node_modules')) {
          return false;
        }

        // exclude react and react-dom
        if (/[\\/]node_modules[\\/](react|react-dom)[\\/]/.test(mod.context)) {
          return false;
        }

        // exclude react-router and react-router-dom
        if (/[\\/]node_modules[\\/](react-router|react-router-dom)[\\/]/.test(mod.context)) {
          return false;
        }

        // return all other node modules
        return true;
      },
      name: 'vendors',
      chunks: 'all'
    }
  }
}

Answer 1

尝试将其设置为您的配置

optimization: {
    splitChunks: {
      maxInitialRequests: 4, // This one!

maxInitialRequests的默认值为4，因此，如果您有4个以上的捆绑包，它将以某种方式合并其中的一部分。

Webpack Split Chunks插件会覆盖cacheGroups，正则表达式匹配错误吗？

1 个答案: