webpack js兼容性处理

1、基本js兼容性处理 --> @babel/preset-env
只能转换基本语法，promise等高级语法不能转换
官方文档：https://webpack.docschina.org/loaders/babel-loader/
1）安装
npm install -D babel-loader @babel/core @babel/preset-env
2）配置

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

2、JavaScript的模块化标准库 --> core-js
可以按需加载，支持js的高级语法转换
1）安装
npm install -D core-js
2）配置

{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      // 预设：知识babel做怎样的兼容性处理
      "presets": [
        ["@babel/preset-env", {
          // 按需加载
          "useBuiltIns": "usage",
          // 指定core-js版本
          "corejs": 3,
          // 指定浏览兼容性版本
          "targets": {
            "chrome": "60",
            "firefox": "60",
            "ie": "9",
            "safari": "10",
            "edge": "17"
          }
        }]
      ]
    }
  }
}

本次安装包的版本：
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"babel-loader": "^8.2.3",
"core-js": "^3.19.2",