2022-01-07 webpack中babel的使用

安装依赖

1. @babel/core babel的核心依赖
2. @babel/preset-env babel的预置环境，解决不同浏览器的兼容问题
3. bable-loader babel与webpack结合
4. core-js 不用浏览器的环境，提供新的js运行环境，提高js运行的兼容性，core-js包含的东西比较多，用的时候并不需要将其全部使用，需配置按需使用。

配置如下:
webpack.config.js 文件

module.exports = {
  output: {
    path: __dirname + "/dist",
    filename: "boudle.js",
    // 输出的文件非箭头函数格式
    environment: {
      arrowFunction: false
    }
  },
  modules: [
    {
      test: /\.ts$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                // 指定环境的插件
                "@babel-preset-env",
                {
                  // 表示兼容到的最低版本
                  "targets": {
                    "chrome": "88"
                   },
                  // corejs的版本
                  "corejs": "3",
                  // 表示corejs的加载方式，usage 为按需加载。
                  "useBuiltIns": "usage"
                 }
               ]
             ]
          }
        },
        'ts-loader'
      ]
    }
  ]
}