Babel 是一个 JavaScript 编译器

在我们自己搭建脚手架时，肯定会接触到babel编译器，尤其现在ES6语法已经成为我们日常开发的习惯语法糖，但是浏览器对新语法的兼容总是滞后的，所以就需要编译器解析各种ES2015+的语法到ES5，所以Babel就诞生了。Babel 通过语法转换器来支持新版本的 JavaScript 语法。

babel-loader是加载器

它的作用是在webpack打包时加载js等后缀名的文件，然后交给babel处理。

@babel/preset-env

它是一个智能预设，它允许你使用最新的 JavaScript 语法，可以根据制定环境提供语法转换，比如要不要兼容IE，兼容到chrome到什么版本，要不要polyfill等等。

但是仅仅编译js还不行，随着vue,react等框架的诞生，需要让babel编译器去编译jsx等语法，所以各种预设器就出现了，如编译react的"@babel/preset-react"和处理typescript的"@babel/preset-typescript"等等

所以日常webpack工程化中，一般的babel配置如下：

rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    useBuiltIns: "usage", // babel 就可以按需加载 polyfill，并且不需要手动引入 @babel/polyfill：
                    targets: "> 1%,last 2 versions,not ie <= 11",
                    corejs: 2,
                  },
                ],
                "@babel/preset-react",
                "@babel/preset-typescript",
              ],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    absoluteRuntime: false,
                    corejs: 2,
                    helpers: true,
                    regenerator: true,
                    useESModules: false,
                  },
                ],
                "@babel/plugin-proposal-class-properties",
              ],
            },
          },
        ],
      },
     //其他加载器
    ],