Question

我迁移到Webpack 4并根据Docs进行了所有设置，但是，我的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配置更新您的问题，以使我们对您的设置有更多的了解。

通天塔不编译供应商查克

1 个答案: