1、webpack、babel-loader、babel.config.js与babel的关系
Webpack是打包工具，定义入口文件，将所有模块引入整理后，通过loader和plugin处理后，打包输出。
babel-loader是 Webpack 的一个 loader，Webpack通过babel-loader 使用Babel。
babel.config.js是 Babel 的配置文件，告诉Babel如何处理编译js。
Babel是js编译工具，把高版本语法编译成低版本语法，或者将文件按照自定义的规则转换成js语法。
它们的工作流程：
webpack => babel-loader => babel.config.js => babel
2、babel是什么
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块，例如 core-js）
- 源码转换（codemods）
3、babel.config.js文件
plugins、presets介绍
plugins：指导 Babel 如何对代码进行转换。
module.exports = {
plugins: [
"@babel/plugin-syntax-jsx",
"@babel/plugin-transform-react-jsx",
"@babel/plugin-transform-react-display-name",
],
};
presets：plugins的集合。
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: ["last 2 version"], // 最近 2 个版本的浏览器
},
},
],
],
};
常用的presets如下：
- @babel/preset-env for compiling ES2015+ syntax
- @babel/preset-typescript for TypeScript
- @babel/preset-react for React
- @babel/preset-flow for Flow
