webpack4安装、配置以及使用babel

大家好，我终于学到webpack的babel的使用了，首先介绍一下为什么要使用babel。
原因：webpack中，默认只能处理一部分ES6(2015)新语法，一部分更高级的ES6语法或者ES7语法，weback是处理不了的，这时候就要借助第三方的loader，来帮助webpack处理这些高级的语法，当第三方loader将这些语法处理完毕后，就会交给webpack进行打包到bundle.js文件里面。

安装过程：
一、安装babel-loader、babel-core、babel-preset-env
1.babel-loader的作用与其他loader一样，用来实现对特定文件的处理。
安装：npm install -D babel-loader
2.babel-core的作用在于提供一系列api，当webpack使用babel-loader处理文件时，实际上是调用了babel-core的api。
安装：npm install -D border-core
3.babel-preset-env的作用是告诉babel用哪种转码规则处理文件。
安装npm install -D babel-preset-env

但其实现在webpack安装babel已经采用了新的安装方式，所以单纯安装上述文件是会报错的，接下来介绍一下新的安装步骤:
1.npm install babel-loader babel-core babel-preset-env -D
2.npm i @babel/plugin-transform-runtime -D
3.npm i @babel/runtime -D
4.npm i @babel/[email protected]^7.0.0 -D
5.npm i @babel/preset-env -D
6.npm i @babel/plugin-proposal-class-properties -D
7.npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D


二、配置babel规则
在项目跟目录下新建一个.babelrc文件，在里面输入配置规则：

配置.babelrc文件时，要符合json的语法规范，不能使用注释等。

三、在配置文件webpack.config.js中添加匹配规则

这里必须用exclude将node_modules目录文件排除。原因：
1.如果不将node_modules文件排除，babel会将这个文件里面的js文件都打包编译，这样非常浪费cpu，使得打包非常慢。
2.即使将node_modules中的js文件都打包编译，最后的项目也无法正常运行。

这样就可以安装成功啦！在main.js中输入ES6的语法，执行npm run dev就能在浏览器看见输出效果了。