webpack中babel的安装及配置

为什么要使用babel

虽然webpack可以打包js文件，但是一些高级语法是无法识别的，因此需要使用第三方工具babel-loader,高级js语言变成低级语言

babel的安装及配置

安装

npm install -D babel-loader @babel/core @babel/preset-env webpack

npm i @babel/plugin-proposal-class-properties -D

配置

 { test: /\.m?js$/, use: 'babel-loader', exclude: /(node_modules|bower_components)/ }//处理高级js语法，如部分es6

.babelrc配置

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

说明
1、exclude: /(node_modules|bower_components)/将(node_modules或者components排除，否则babel会打包编译这两个里面的js文件，导致项目不能运行。
2、"plugins"里面写的是安装的插件
3、"presets"里面写的是语法