webpack5学习与实战-（六）-babel-loader解析js文件

在之前，使用css-loader来解析过css文件。那babel-loader则是用来解析js文件的。这是因为js的版本一直在更新，不断引入新的写法，但是浏览器的更新滞后，有些浏览器还不支持。所以就需要用babel-loader来进行转化成浏览器支持的写法。

一，不使用babel-loader的时候

我们在代码中写：

function getString(){
   return new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('hello world')
    },2000)
   })
}
async function helloworld(){
    let string=await getString()
    console.log(string)
}
export default helloworld

这种es6的语法的时候。当我们直接打包编译出来，在浏览器中运行的代码是这样的（这里实际上时mapsource映射的源文件。实际上打包出来的代码也是这样)：

可以看到，它并没有转化成es5，当浏览器不支持es5时，就会发生报错。所以，我们需要一个loader,来把es6的语法转化为es5这种浏览器通用的语法。

二，使用babel-loader

第一步：安装相关依赖

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

还需要安装处理async和await的包：

npm install -D @babel/runtime @babel/plugin-transform-runtime

第二步，配置webpack

{
  test: /\.js$/,
     use: {
       loader: 'babel-loader',
       options: {
         presets: ["@babel/preset-env"],
         plugins: [["@babel/plugin-transform-runtime"]],
         //开启缓存
         cacheDirectory:true
       },
     },
     exclude: /node_modules/
   }

这样之后，就能够把es6的代码转化为es5的代码了。