Babel 不编译供应商 chuck

Question

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

我已将 vendors 放入 optimization.splitChunks.cacheGroups 对象中，正如文档所建议的那样，但没有找到一种方法让这些 "cacheGroups" 使用 babel 进行编译。

我的问题是其中一个库有 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 也用 babel 编译供应商？

此致

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 配置更新您的问题，以便我们更深入地了解您的设置。

Babel 不编译供应商 chuck

Babel not compiling vendors chuck

javascript

webpack

webpack-4