js中的this.callback()，this.async()如何理解

问题遇到的现象和发生背景

在学习 webpack 的自定义 loader 时，遇到了两段代码没理解，导致不理解webpack的执行原理，
不理解1：
this.callback(null, content, map, meta)

不理解2：
const callback = this.async()
setTimeout(() => {
callback(null, content, map, meta)
}, 1000)

以上两段代码是啥作用，如何理解，执行情况是什么

部分代码

webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name].js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          "./loaders/demo/test1",
          "./loaders/demo/test2",
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html')
    }),
  ],
  mode: 'development'
}

test1.js

// 同步 loader
/*
* loader就是一个函数
* 当webpack解析资源时，会调用相应的loader去处理
* loader接受到文件内容作为参数，返回内容出去
*    content 文件内容
*    map SourceMap
*    meta 别的 loader 传递的数据
* */
module.exports = function (content, map, meta){
  console.log('test1');
  /*
  * 第一个参数: err 代表是否有错误
  * 第二个参数: content 处理后的内容
  * 第三个参数: source-map 继续传递 source-map
  * 第四个参数: meta 给下一个 loader 传递参数
  * */
  this.callback(null, content, map, meta)
  return content
}

test2.js

// 异步 loader
module.exports = function (content, map, meta){
  const callback = this.async()

  setTimeout(() => {
    console.log('test2');
    callback(null, content, map, meta)
  }, 1000)
}

运行结果及报错内容

不理解为什么是这样输出，可以推荐这方面的解答

this.async() 是异步方法 callbalck是回调函数
setTimeout(() 里的代码都是异步 所以 要用 async 。 const callback = this.async()这个就是 把callback 定义成 异步函数