babel是什么？
babel 是一个 JavaScript 编译器。（具体详情可以通过bable官网查看）
babel的作用是什么？
babel的作用就是将浏览器不认识的高级javascript语法解析成低级的语法，来实现浏览器的兼容
webpack也可以解析高级js语法为什么还需要babel？
在 webpack 中，默认只能处理一部分 es6 的新语法，一些更高级的 es6 语法或者 es7 语法 webpack 是处理不了的；这时候就需要借助第三方 loader 来帮助webpack 处理这些高级的语法，当第三方 loader 把高级语法转为低级语法之后会把结果交给 webpack 打包到 bundle.js中。
babel的使用步骤
通过babel可以帮我们将高级的语法转换为低级的语法
步骤一、在 webpack 中，可以运行如下两套命令安装两套包，去安装 babel 相关的 loader 功能。
第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
步骤二、打开 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 转换完毕了，但是项目也无法正常运行。
步骤三、在项目的根目录中，新建一个叫做 .babelrc 的 babel 配置文件，这个配置文件属于 JSON 格式，所以在写 .babelrc 配置的时候，必须符合 JSON 语法规范；不能写注释，字符串必须使用双引号；然后在 .babelrc 写如下的配置：大家可以把 preset 翻译成【语法】的意思
{
“presets”:[“env”,“stage-0”], 这个括号里面的语法名字就是两套包带语法里面的后缀
“plugins”:[“transform-runtime”] 这个括号里面的插件名字就是两套包带插件里面的后缀
}
