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語法。