1. babel-loader 的使用意义

webpack 自身可以自动加载JS文件，就像加载JSON文件一样，无需任何 loader。可是，加载的JS文件会原样输出，即使你的JS文件里包含ES6+的代码，也不会做任何的转化。这时我们就需要Babel来帮忙。Babel 是一个 JavaScript 编译器，可以将ES6+转化成ES5。在Webpack里使用Babel，需要使用babel-loader
hello.js

  1. function hello() {
  2.     return new Promise((resolve, reject) => {
  3.         setTimeout(() => {
  4.             resolve('Hello Webpack5 !!!')
  5.         }, 1000)
  6.     })
  7. }
  9. async function getString() {
  10.     const str = await hello()
  11.     console.log(str)
  12. }
  14. export default getString

index.js

  1. import hello from './hello.js'
  3. hello()

打包：
dist 目录下输出的 bundle.js 中：原封不动的将代码打包进去，其中包括 es6 的语法，当一些浏览器版本过低时，不会被识别，所以我们需要将 es6 转化为 es5
image.png

2. 使用 babel-loader

① 安装依赖
npm i babel-loader @babel/core @babel/preset-env

  • babel-loader: 在webpack里应用 babel 解析ES6的桥梁
  • @babel/core: babel核心模块
  • @babel/preset-env: babel预设，一组 babel 插件的集合

② 配置module.rules

  1.             {
  2.                 test: /\.js$/,
  3.                 // node_modules 中的代码无需编译
  4.                 exclude: /node_modules/,
  5.                 use: {
  6.                     loader: 'babel-loader',
  7.                     options: {
  8.                         // 通过 presets 设置预设
  9.                         presets: ['@babel/preset-env']
  10.                     }
  11.                 },
  12.             },

打包后进入浏览器发现报错
image.png
再进入 bundle.js 中，从编译完的结果可以看出，async/await的ES6语法被 babel 编译了。而且发现的确使用了regenratorRuntime,那么这个问题要怎么解决呢？
image.png

3. regeneratorRuntime 插件

regeneratorRuntime是webpack打包生成的全局辅助函数，由 babel 生成，用于兼容async/await的语法

以上regeneratorRuntime is not defined这个错误显然是未能正确配置babel

使用regeneratorRuntime插件：

  1. 安装依赖

npm i @babel/runtime
npm i @babel/plugin-transform-runtime

  1. 在module.rules中配置一下babel
    1. {
    2.  test: /\.js$/,
    3.  exclude: /node_modules/,
    4.  use: {
    5.      loader: 'babel-loader',
    6.      options: {
    7.          presets: ['@babel/preset-env'],
    8.          // @babel/plugin-transform-runtime 是 babel-loader 的一个插件，所以在自己的 plugins 属性中进行配置 
    9.          plugins: [
    10.              ['@babel/plugin-transform-runtime']
    11.          ]
    12.      }
    13.  },
    14. },
    然后打包，启动服务进入浏览器可以正常查看效果
    bundle.js 中：成功处理了 es6 的语法async/await
    image.png