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'],
            },
       },