[JavaScript知识库]webpack处理js兼容性问题

方法一：

使用插件：babel-loader @babel/core @babel/preset-env

缺点：只能处理基本的js兼容性问题，Promise等高级语法就不能转换

方法二：

使用插件：@babel/polyfill （安装后导入即可）

缺点：这个插件会将所有的兼容性代码全部引入，会导致打包后文件体积变大

方法三：

使用插件：core-js，按需加载

所以可以选择方法一 + 方法三来处理js兼容性问题，代码如下：

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做怎么样的兼容性处理
          presets: [
            '@babel/preset-env',
            {
              // 按需加载
              useBuiltIns: 'usage',
              // 指定core-js版本
              corejs: {
                version: 3
              },
              // 指定兼容性做到哪个版本浏览器
              targets: {
                chrome: '60',
                firefox: '60',
                ie: '9',
                safari: '10',
                edge: '17'
              }
            }
          ]
        }
      }
    ]
  },