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