Javascript 在网页包配置中定义多个babel预设配置

我创建了一个

webpack.config.js

文件，用于导出两个不同的webpack配置对象。我需要设置不同的巴别塔在这些预设选项。经过一点研究后，我尝试创建了两种不同的加载程序配置，每种配置都会向预设传递不同的

目标
选项，如下所示：

// 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.config.js
文件中将目标选项传递给
@babel/preset env
？（我认为这是我这个项目的理想设置）

如果不可能，我应该如何设置WebPack/babel，以便一次运行WebPack就可以生成两个不同的输出文件，并使用两种不同的babel配置生成？
基本上，您的加载程序选项必须看起来像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 } }
    ]
  }
}

与

也许在预设数组中显示另一个预设以显示语法是一个很好的示例。我花了一点额外的时间去发现，并且在将来可以帮助人们。例如，针对ie:10的
@vue/app
预设
{
  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
          }
        }
      ]

    ]
  }
}