Question

我已经创建了一个webpack.config.js文件，该文件正在导出两个不同的WebPack配置对象。我需要为这些预设中的预设设置不同的babel选项。经过一些研究，我尝试创建两个不同的加载器配置，每个都将不同的targets选项传递给预设，如下所示：

// default JS loader config for browsers that support <script type='module'
{
    loader:'babel-loader',
    options:{
        presets: ['@babel/preset-env', {
            targets: {
                esmodules: true
            }
        }]
    }
}
...


// fallback for browsers that load the <script nomodule 
{
    loader:'babel-loader',
    options:{
        presets: ['@babel/preset-env', {
            targets: "> 0.5% in UK, last 2 versions, not dead, ie 11"
        }]
    }
}

但是我显然要解决这个错误，因为在WebPack构建上会出现此错误

ERROR in ./some-path/WorkflowStage.class.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    ReferenceError: [BABEL] e:\some-path\WorkflowStage.class.js: Unknown option: .targets. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

我的主要问题是我应该如何从我的@babel/preset-env文件中将目标选项传递给webpack.config.js？（我认为这是该项目的理想设置）。

如果这不可能，那么我应该如何设置WebPack / babel，以便单次运行WebPack可以生成具有两种不同babel配置的两种不同输出文件？

Answer 1

基本上，您的加载程序选项必须看起来像JS编码的.babelrc。每个带有选项的预设都必须在自己的数组中。

所以，替换

{
  loader: 'babel-loader',
  options: {
    presets: [
      // defines the @babel/preset-env as the first preset
      '@babel/preset-env',
      // defines an invalid object as a preset (throws error)
      { targets: { esmodules: true } }
    ]
  }
}

使用

{
  loader: 'babel-loader',
  options: {
    presets: [

      // defines a preset with options
      [
        '@babel/preset-env', {
          targets: {
            esmodules: true
          }
        }
      ]

    ]
  }
}

在Webpack配置中定义多个babel预设配置

1 个答案: