webpack5转化es6代码后，立即执行函数依旧是箭头函数

如图，里面的代码转化成es5了，但是最外层依旧是es6

 

 

我的babel配置

 {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    targets: {
                      // chrome: "60",
                      // firefox: "60",
                      // safari: "10",
                      // edge: "17",
                      // ie: "8",
                      browsers: ["> 1%", "last 2 versions"],
                    },
                    corejs: 3,
                    useBuiltIns: "usage",
                  },
                ],
              ],
            },
          },
          "ts-loader",
        ],
      },

解决方法:

1.将webpack将为版本4，版本5默认箭头函数输出

2.在配置文件webpack.config.json中的output内加上

 environment: {
      arrowFunction: false,//关闭箭头函数输出
    },

 environment其它配置

module.exports = {
  output: {
    environment: {
      // The environment supports arrow functions ('() => { ... }').
      arrowFunction: true,
      // The environment supports BigInt as literal (123n).
      bigIntLiteral: false,
      // The environment supports const and let for variable declarations.
      const: true,
      // The environment supports destructuring ('{ a, b } = obj').
      destructuring: true,
      // The environment supports an async import() function to import EcmaScript modules.
      dynamicImport: false,
      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
      forOf: true,
      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
      module: false,
    },
  },
};