Babel没有编译供应商chuck

Question

我迁移到了Webpack 4，并根据文档设置了所有内容，然而，我的vendors.js块并没有像main.js块那样被编译。

我已经按照文档的建议将vendors放到了optimization.splitChunks.cacheGroups对象中，但没有找到使用babel编译这些"cacheGroups"的方法。

我的问题是，其中一个库有一个ES6 class，由于这个原因，现在IE11不能工作。

我的webpack optimization对象看起来像这样：

  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        },
        vendor: {
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }

有没有办法迫使webpack也用巴别塔编译供应商？

问候

Answer 1

您应该发布整个webpack配置，以便为人们提供更多上下文。

无论如何，optimization步骤与实际的转译几乎没有什么关系。您的vendor块被设置为只包含来自node_modules的内容，这些内容几乎从未被处理过(除非您专门告诉babel-loader包含某个包)。

因为我不知道你是如何配置你的babel-loader的，所以我建议你这样做：

{
    test: /\.js$/,
    exclude: (file) => {
        return /node_modules/.test(file) && !file.includes("/node_modules/my-es6-module/");
    }
}

其思想是排除所有包含node_modules的文件，除非文件路径包含您确实需要使用babel处理的特定模块的名称。

通常，将ES6代码发布到npm是一种非常糟糕的做法，应该不惜一切代价加以避免。

如果这还不够，请使用您的webpack配置更新您的问题，以便我们更深入地了解您的设置。