webpack5打包出的js在ie11, ie10中报错

使用webpack5默认打包出来的js文件在ie11, ie10中报错SCRIPT1002: 语法错误bundle.js (1,14)。原因和babel设置无关，webpack5中默认打包出来的js文件会用es6语法中的箭头函数：

// 打包出来的bundle.js
(()=>{"use strict";var r; ... })();

故在ie11和ie10中引用后会报错。以下是在webpack.config.js中两种配置方法(设置使用es5的function)：

1. 配置output.environment，告诉 webpack 在生成的运行时代码中可以使用哪个版本的 ES 特性。其他选项见文档。

webpack.config.js

module.exports = {
  entry: [...],
  plugins:[...],
  module: {...},
  // ...
  output: {
    path: '...',
    filename: '...',
    publicPath: '...',
    environment: {
      // 是否使用箭头函数
      arrowFunction: false,
    },
  },
};

2. 配置target，告知 webpack 为目标(target)指定一个环境。其他选项见文档

webpack.config.js

module.exports = {
  entry: [...],
  plugins:[...],
  module: {...},
  // ...
  // 传递多个目标时使用共同的特性子集
  // webpack 将生成 web 平台的运行时代码，并且只使用 ES5 相关的特性。
  target: ['web', 'es5'],
};

配置以上任意一个选项后，ie11,ie10不再报错。生成的bundle.js:

// es5语法
!function(){"use strict";var r;...}();

当没有配置以上两个选项时，wepack5将默认使用 ES6语法。

注意:配置修改后ie不生效，清除ie浏览器缓存,重启服务