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文件如下所示：

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

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