webpack中babel的配置

Babel的作用

在webpack中默认只能处理一部分ES6的新语法，一些更高级的ES6语法或者Es7语法，webpack是处理不了的；这个时候就需要借助第三方的loader帮助webpack处理这些高级的语法，当第三方loader把高级语法转为低级语法之后，会把结果交给webpack去打包到bundle.js中，通过Babel,可以帮助我们将高级的语法转换为低级的语法

Babel的安装及配置：

以下是Babel的安装及配置（安装均是最新版本的）：
1 .安装Babel相关的loader功能
（1）安装Babel-loader

npm i babel-loader -D

（2）安装 @babel/core

npm i @babel/core

注意：babel/core的版本要跟babel-loader的版本对应否则项目就会出现版本兼容性问题，这里使用的babel-loader的版本是8.0.6，对应@babel/core的版本是7.4.5
(3)安装 @babel/plugin-transform-runtime

   npm i @babel/plugin-transform-runtime -D

（4）安装babel转码—@babel/preset-env

npm i @babel/preset-env -D

（5）安装@babel/plugin-proposal-class-properties

npm i @babel/plugin-proposal-class-properties -D

（6）安装了@babel/plugin-transform-runtime，默认是要安装@babel/runtime，否则程序将会报错

npm i @babel/runtime -D

安装完后查看package.json文件如下所示：

2,打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：

 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

注意：在配置babel的loader规则的时候，必须把node_modules目录通过exclude选项排除，原因有以下几点：
（1）：如果不排除node_modules，则Babel会把node_modules中所有的第三方Js文件，都打包编译，这样，会非常消耗cpu,同时打包速度非常慢；
（2）：哪怕最终Babel把所有node_modules中的Js转换完毕了，但是，项目也无法正常运行
3，在项目的根目录中，新建一个叫做.babelrc 的Babel配置文件，这个配置文件属于JSON格式，所以在写.babelrc配置的时候必须符合JSON语法规范：不能写注释，字符串必须用双引号
在.babelrc写如下配置

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}
配置信息如下所示：