Webpack differential build

Question

I'm trying to make 2 builds for web, one for modern browsers, and other to make old IE 11 happy. Now I have webpack and babel, and webpack has an array of configs:

 module.exports = [
    {
        //more config
        name: "modern",
        module: {
            rules: [                
                {
                    test: /\.m?js$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                envName: "modern"
                            }
                        }
                    ]
                }
             ]
          }
    },
    {
        //more config
        name: "legacy",
        module: {
            rules: [                
                {
                    test: /\.m?js$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                envName: "legacy"
                            }
                        }
                    ]
                }
             ]
          }
          //more config
        }
     ]

babel has this config

{
"env": {
    "modern": {
        "presets": [
            [
                "@babel/preset-env",
                {
                    "useBuiltIns": "usage",
                    "corejs": 3.21,
                    "modules": false, 
                    "targets": "> 5%, not dead"
                }
            ]
        ]
    },
    "legacy": {
        "browserslistConfigFile":false,
        "presets": [
            [
                "@babel/preset-env",
                {
                    "useBuiltIns": "usage",
                    "corejs": 3.21,
                    "modules": false,
                    "targets": "ie 11",
                    "ignoreBrowserslistConfig": true
                }
            ]
        ]
    }
}

The problem was that I cannot make a legacy build. every time it outputs some arrow function which won't work on IE. I see that it takes the default browserslist values, because if I manually set browserslist to IE globally in package.json it outputs IE valid js, but in this case the modern build hasn't modern code.

So how can I make a truly modern build and an old build?

Answer 1

As I say, for me the problem was that babel compiles right whit my choices, but webpack everytime picks a browserslist that its not the babel targets,and adds, at least,an IIFE arrow function so the output code it´s wrong for IE. What i found is this line in webpack config:

target: 'browserslist:legacy',

It points to one of the browserslist enviroments that I have in package.json:

"browserslist": {
    "modern": [
        "> 5%",
        "not dead"
    ],
    "legacy": [
      "ie 11"
    ]
  },

And remove targets from babel:

{
    "env": {
        "modern": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "modules": false 
                    }
                ]
            ]
        },
        "legacy": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "useBuiltIns": "usage",
                        "corejs": 3.21,
                        "modules": false,
                    }
                ]
            ]
        }
    }
}

So babel compiles for my browserslist, and webpack add the right IIFE function at beggining