Webpack 差分构建

Question

我正在尝试为 Web 构建 2 个版本，一个为现代浏览器构建，另一个让旧的 IE 11 满意。现在我有 webpack 和 babel，并且 webpack 有一个配置数组：

 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 有这个配置

{
"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
                }
            ]
        ]
    }
}

问题是我无法进行遗留构建。每次它输出一些在 IE 上不起作用的箭头函数。我看到它采用默认的 browserslist 值，因为如果我在 package.json 中手动将 browserslist 全局设置为 IE，它会输出 IE 有效的 js，但在这种情况下，现代构建没有现代代码。

那么我怎样才能制作真正现代的建筑和旧建筑？

Answer 1

正如我所说，对我来说，问题是 babel 会根据我的选择进行编译，但是 webpack 每次都会选择一个不是 babel 目标的浏览器列表，并至少添加一个 IIFE 箭头函数，所以IE 的输出代码是错误的。我在 webpack config:

中找到了这一行

target: 'browserslist:legacy',

它指向我在 package.json:

中的浏览器列表环境之一

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

并从 babel 中删除目标：

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

所以 babel 为我的浏览器列表编译，webpack 在开始时添加正确的 IIFE 函数

Webpack 差分构建

Webpack differential build

internet-explorer

webpack

babeljs