在 webpack config 中定義多個 babel 預設配置

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.

我的主要問題是我應該如何將目標選項從我的webpack.config.js文件中傳遞給@babel/preset-env ？ （我認為這是我對這個項目的理想設置）。

如果這是不可能的，我應該如何設置 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
          }
        }
      ]

    ]
  }
}