webpack中使用babel

babel的作用是解析es6或更高级的语法
一般在webpack.common.js文件中配置

1、基本使用，下载包

首先下载如下三个包，下载到devDependencies中。
@babel/core
@babel/preset-env
babel-loader

2、在module项的rules中配置

rules:[
 {
                test: /\.js$/,
                loader: ['babel-loader'],
                include: srcPath,
                exclude: /node_modules/
            },
...
]

test,验证规则，是js文件
loader，通过babel-loader去处理
include，处理哪个文件夹下的文件
exclude，排除哪个文件夹下的文件不处理

3、.babelrc文件，对babel进行配置的文件

.babelrc文件放在根目录下，在里面写一些配置

{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

1. presets，一般用@babel/preset-env就好了，这里面包含常用的es6、es7语法处理

2. plugins，根据情况做扩展，一般用不到
   es6的语法有很多，如箭头函数、结构赋值等。babel都是通过plugin来转某一个语法。
   而presets就是把常用plugin打一个包，叫preset-env。
   preset-env就是一堆plugin的集合。
   如果preset-env中还有一些还不能满足语法的解析，这时，就在plugins数组中去扩展。

3、babel-polyfill

1、polyfill的概念

polyfill的意思是补丁。
例如，对于数组，有一个indexOf方法。但是在很早之前有一些低版本的es6是不支持这个方法的，那么，就为这个indexOf添加一个polyfill。使之支持indexOf。

2、core-js的概念

一个标准的库，所有新语法的polyfill的一个集合
注：es6中的generator函数,core-js不能支持。

3、regenerator

为了解决core-js不支持es6中的generator函数。

4、babel-polyfill

babel-polyfill是core-js和regenerator的集合。
babel-polyfill在Babel7.4之后被弃用了。
推荐直接使用core-js和regenerator。

1. 下载@babel/polyfill，下载到dependencies中；
2. 在js中引入

import '@babel/polyfill'

5、配置按需引入babel-polyfill

babel-polyfill文件比较大
如果只用了一部分功能，没必要全部引入
在.babelrc文件中

"presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",//按需引入
                "corejs": 3//版本
            }
        ]
    ],

同时把js文件中的引入语句（import ‘@babel/polyfill’）删掉，因为是按需引入了。
所以没有必要再安装babel-polyfill，只需安装@babel/core

4、babel-runtime

babel-polyfill的问题：
会污染全局变量。
因为对于不支持的API，babel-polyfill就会重写这个API
例如数组的方法includes如果不支持，就通过Array.prototype.includes=function(){}来重写。
这样，就会令Array.prototype中有了includes这个变量，别人就不能再使用includes这个变量了。
babel-runtime就是用来解决这个问题的。

1、安装插件

安装@babel/plugin-transform-runtime到devDependencies中
安装@babel/runtime到dependencies中

2、配置.babelrc

  "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]