webpack--关于babel的配置

在webpack中只能处理一部分es6的新语法，一些更高级的es6或es7语法，webpack处理不了，这时需要借助第三方loader来处理这些高级语法

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

具体步骤如下：

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

cnpm i babel-loader @babel/core @babel/preset-env -D
cnpm i @babel/runtime @babel/plugin-transform-runtime -D
cnpm i @babel/plugin-proposal-class-properties -D

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

module:{//配置所有第三方loader的模块
        rules:[//第三方模块的匹配规则
            {
                test:/.js$/,
                use:'babel-loader',//配置babel来转换高级的语法
                exclude:/node_modules/
            }
        ]
    },

3.在项目的根目录中，新建一个.babelrc的babel配置文件

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-class-properties","@babel/plugin-transform-runtime"]
}