babel-loader需要配合 .browserslistrc 文件 和 babel 的插件才可以打包 JavaScript，把esModule 的新特性轉(zhuǎn)為瀏覽器可以兼容的語(yǔ)法。

babel-loader配置：

在 webpack.config.js 的同級(jí)創(chuàng)建 babel.config.js 配置文件

在 webpack.config.js 的同級(jí)創(chuàng)建? .browserslistrc 文件，返回需要兼容的瀏覽器的范圍

使用 babel-loader 處理 typescript 文件

babel.config.js 文件修改

這個(gè)時(shí)候，已經(jīng)可以編譯 typescript 文件了，但是，如果 ts 文件中有錯(cuò)誤，編譯的時(shí)候并不會(huì)報(bào)錯(cuò)，還是會(huì)編譯成功，運(yùn)行的時(shí)候才能發(fā)現(xiàn)錯(cuò)誤，使用 ts-loader 就可以在編譯的時(shí)候就報(bào)錯(cuò)，這樣編譯就不通過(guò)，那么，使用 babel-loader 是否也可以有這種友好的體驗(yàn)?zāi)?，?dāng)然是肯定的，修改 package.json 文件，增加一個(gè)命令 ck 命令，這個(gè)命令就是使用 tsc 命令檢測(cè)ts文件是否有錯(cuò)誤，但是不會(huì)編譯（--noEmit），如果有錯(cuò)誤，就不會(huì)繼續(xù)執(zhí)行，然后編譯還是使用 build 命令，就OK了！

使用 babel polyfill?

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

在項(xiàng)目的入口文件夾頂部引入兩個(gè)模塊

需要修改 babel.config.js 配置