webpack 自定义 loader ？

loader的本质 - 函数

module.exports = function (content, source , meta){
      this.callback(null,content,source,meta);// 同步loader
      
      const callback = this.async();  // 异步loader，一般支持采用异步方式写loader
      setTimeout((0=>{
            callback(null,content); // 第一个参数代表发生错误
      },1000)
}

自定义loader babel-diy-loader

const { getOptions } = require('loader-utils');  // 获取 options
const { validate } = require('schema-utils');   // 用来验证 options格式
const babel = require('@babel/core');
const util = require('util');

const babelSchema = require('./schema-babel');
// babel.transform 用来编译代码的方法
// 是一个普通异步方法
// util.promisify 能将普通异步方法转化为基于promise的异步方法
const transform = util.promisify(babel.transform);
module.exports = function (content, source, meta) {
  const options = getOptions(this);
  console.log(options);
  validate(babelSchema, options, { name: 'babel-diy-loader' });
  const callback = this.async();
  transform(content, options)
    .then(({ code, map }) => {
      callback(null, code, map, meta);
    })
    .catch((err) => {
      callback(err);
    });
};

schema.json

{
  "type": "object",
  "properties": {
    "presets": {
      "type": "array"
    }
  },
  "additionalProperties": true
}

webpack.config.js 中使用

      {
            loader: 'babel-diy-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
       },