17 webpack中babel的配置

在webpack中，默认只能处理一部分ES6的新语法，一些更高级的ES6语法或者ES7语法，

webpack是处理不了的；这时候，就需要借助于第三方的loader，来帮助webpack处理这些高级的语法，

当第三方loader把高级语法转为低级的语法之后，会把结果交给webpack去打包到bundle.js中。

通过Babel，可以帮我们将高级的语法转换为低级的语法

1.webpack中，可以运行如下两套 命令，安装两套包，去安装Babel相关的loader功能：

1.1第一套：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

1.2第二套：cnpm i babel-preset-env babel-preset-stage-0 -D

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

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

2.2注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉：

原因有两个：

2.2.1如果不排除node_modules，则Babel会把node_modules中所有的第三方JS文件，

都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；

2.2.2哪怕，最终，Babel把所有node_modules中的JS转换完毕了，但是，项目也无法正常运行！

3.在项目的根目录中，新建一个叫做 .babelrc 的Babel配置文件，这个配置文件，属于JSON格式，

所以，在写 .babelrc配置的时候，必须符合JSON语法规范：不能写注释，字符串必须使用双引号

3.1在.babelrc写如下配置：大家可以把preset翻译成【语法】的意思

        // {
        //     "presets":["env","stage-0"],
        //     "plugins":["transform-runtime"]
        // }

4.了解：目前，我们安装的 babel-preset-env，是比较新的ES语法，之前，我们安装的是

babel-preset-es2015，现在，出现了一个更新的 语法插件，叫做babel-preset-env，

它包含了 所有的和es***相关的语法