Webpack5关闭默认箭头函数输出

问题描述

在用webpack5做ES2015+语法打包时，我发现输出文件当中会包含箭头函数，起初以为是babel的问题，后面发现是webpack5打包文件默认输出形式就是箭头函数，在查阅文档后找到了解决方案

方法

• 方案一： 将webpack版本降低至4.x（懒人方案）
• 方案二： 在webpack.config.js的输出配置中添加箭头函数关闭environment: {arrowFunction: false}

output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist'),
        environment: {
            arrowFunction: false
        }
},

以上就可以完成关闭webpack5默认输出箭头函数，实现对不支持ES6浏览器的兼容。

附 output.environment 文档

output.environment

告诉 webpack 在生成的运行时代码中可以使用哪个版本的 ES 特性。

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,
    },
  },
};