Webpack5配置报错：rules[3].loader应为非空字符串（2022）

Webpack 5 稳定版的配置schema校验明确要求：规则里的loader字段值必须是非空字符串，仅用来直接声明loader名称；如果需要给loader传递配置参数，不能把包含loader名、options的配置对象直接赋值给loader字段——这种旧版本兼容的不规范写法，在2022年发布的Webpack 5正式版本中已经被严格拦截。
你配置里module.rules数组的第4条规则（数组索引从0开始计数，对应.jsx后缀的babel-loader配置，也就是报错提示的rules[3]），以及同数组的第3条规则（对应.js后缀的babel-loader配置）都存在这个写法错误，只是校验流程扫到第4条时先抛出了错误，只改单条的话后续会触发同类型的第二条报错。

把两个babel-loader规则的写法改成符合Webpack 5规范的格式，二选一即可：

写法1：保留loader字段，options与loader同级 #

直接把loader名称写在loader字段值里，options挪到和loader平级的位置：

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        presets: ["@babel/preset-env"]
    }
},
{
    test: /\.jsx$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        presets:["@babel/preset-react", "@babel/preset-env"]
    }
}

写法2：改用use字段（推荐，与现有配置风格统一） #

use字段原生支持接收对象格式的loader配置，和你现有CSS、图片规则的写法保持一致：

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env"]
        }
    }
},
{
    test: /\.jsx$/,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets:["@babel/preset-react", "@babel/preset-env"]
        }
    }
}

• 你使用的Webpack 5已经内置了静态资源处理能力，file-loader在v5版本中已不再推荐使用，可以把图片规则替换为原生资源模块写法，避免后续兼容问题：

{
    test: /\.(jpg|jpeg|png|svg)/,
    type: "asset/resource"
}

• @babel/polyfill从Babel 7.4.0版本开始已被废弃，你当前安装的Babel相关依赖均为7.18+版本，建议移除入口配置里的@babel/polyfill，改用core-js按需注入polyfill，减少打包产物体积。

内容的提问来源于stack exchange，提问作者Akira Frank