webpack4配置babel-loader

babel是什么呢？
babel是一个把es6语法转移成es5语法的工具，这样就可以保证我们的项目能够运行在一些老旧的浏览器上了（比如ie。。。）
下面我们就一起开始在webpack中配置babel-loader吧。
1.我们先初始化一个项目

npm init
npm install webpack --save-dev
npm install webpack-cli --save-dev

初始化完成后。
2.在根目录新建一个html文件跟一个index.js文件，index.js中使用了es6的promise和箭头函数

3.在根目录新建一个webpack.config.js文件，此文件用来书写webpack的配置选项，我们先进行一下简单的入口和出口配置，并在package.json中配置一下映射表


4.配置一下我们的模板文件（使用html-webpack-plugin插件），在webpack.config.js中进行配置，随后配置一下第三方插件clean-webpack-plugin

npm install html-webpack-plugin --save-dev
npm install clean-webpack-plugin --save-dev

5.基本配置搞好了，接下来我们开始我们的babel-loader配置吧

npm install babel-loader @babel/core @babel/preset-env --save-dev

在webpack.config.js进行如下配置，并创建.babelrc文件，进行一下配置，然后进行打包


打包完成后，将dist/index.js文件的代码复制到ie浏览器中，就会发现，转换成功！

从此以后再也不用手写兼容代码了吧，哈哈(当然，本人测试也只支持到ie9，如有不足请指出)