webpack 使用 babel-loader 打包 JavaScript

babel-loader需要配合 .browserslistrc 文件 和 babel 的插件才可以打包 JavaScript，把esModule 的新特性转为浏览器可以兼容的语法。

babel-loader配置：

在 webpack.config.js 的同级创建 babel.config.js 配置文件

在 webpack.config.js 的同级创建  .browserslistrc 文件，返回需要兼容的浏览器的范围

使用 babel-loader 处理 typescript 文件

babel.config.js 文件修改

这个时候，已经可以编译 typescript 文件了，但是，如果 ts 文件中有错误，编译的时候并不会报错，还是会编译成功，运行的时候才能发现错误，使用 ts-loader 就可以在编译的时候就报错，这样编译就不通过，那么，使用 babel-loader 是否也可以有这种友好的体验呢，当然是肯定的，修改 package.json 文件，增加一个命令 ck 命令，这个命令就是使用 tsc 命令检测ts文件是否有错误，但是不会编译（--noEmit），如果有错误，就不会继续执行，然后编译还是使用 build 命令，就OK了！

使用 babel polyfill 

官方不推荐使用  @babel/polyfill ，而是  core-js  和  regenerator-runtime

在项目的入口文件夹顶部引入两个模块

需要修改 babel.config.js 配置