image.png
安装：npm i -D babel-loader @babel/core @babel/preset-env
将js解析为低版本，这样就可以适配更多的浏览器了

  1. modul: {
  2.   rules:[
  3.     {
  4.       test:/.\js$/,
  5.       // 一般只需要编译我们自己写的js文件，node_modules中的js文件是不需要编译的
  6.       // 通过配置exclude之设置为不用编译node_modules中的js文件
  7.       exclude:/node_modules/,
  8.       // 有参数的loader使用对象接收
  9.       use:{
  10.         loader:"babel-loader",
  11.         // 配置参数
  12.         options:{
  13.           // 预设（预先设置的）
  14.           presets:["@babel/preset-env"]
  15.         }
  16.       }
  17.     }
  18.   ]
  19. }

regeneratorRuntime插件

用于兼容async/await语法
image.png
安装： npm i @babel/runtime -D
npm i @babel/plugin-transform-runtime -D

  1. module: {
  2.   rules:[
  3.     {
  4.       test:/\.js$/,
  5.       exclude:/node_modules/,
  6.       use: {
  7.         loader:"babel-loader",
  8.         options:{
  9.           presets:["@abel/preset-env"],
  10.           // 用于定义插件的插件，及@babel/plugin-transform-runtime是属于"babel-loader"的插件
  11.           plugins:[
  12.             [
  13.               "@babel/plugin-transform-runtime"
  14.             ]
  15.           ]
  16.         }
  17.       }
  18.     }
  19.   ]
  20. }

运行npx webpack 编译没有问题后，运行服务。