在Webpack4.x环境下使用Babel转换ES6语法

一、介绍

在Webpack中 默认只能转换一部分ES6的新语法
部分更高级的ES6语法或ES7语法 Webpack无法转换

比如：
ES6中类的静态属性

class Person{
   
    static info={
   name:"Mike",age:18}
}
console.log(Person.info)

此时 Webpack默认打包的时候会报错
需要借助第三方loader来处理这些高级的语法
当第三方loader将高级语法转换为低级语法之后 会将结果交给Webpack进行打包到bundle.js中

通过Babel可以很方便将高级的语法转换为低级的语法

Babel 是一个 JavaScript 编译器 主要用于将ECMAScript 2015+版本的代码转换为向后兼容的 JavaScript 语法 以便能够运行在当前和旧版本的浏览器或其他环境中

二、使用步骤

只需三步即可配置Babel：

1、在Webpack中运行如下两套命令 以安装Babel相关的loader

第一套包：cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D
该套包里有@babel/core babel-loader和@babel/plugin-transform-runtime
它们负责语法的转换

第二套包：cnpm i @babel/preset-env @babel/plugin-proposal-class-properties -D
该套包里有@babel/preset-env和@babel/plugin-proposal-class-properties
包含了所有与ES相关的语法 负责匹配语法之间的对应关系

2、配置webpack.config.js

在webpack配置文件webpack.config.js的module节点下的rules数组中 添加一个新