文/ 天机阁首席炼丹师
（青石台上，白须老者盘膝而坐，面前悬浮着九块发光的玉简）
"徒儿们且看，这Loader法宝乃前端修仙者必修之术。尔等可知，当不同属性的灵气（文件类型）涌入经脉（Webpack构建流），需以特定功法转化，方可化为己用？今日为师便传你这'三花聚顶Loader大法'！"
第一章：Loader的修仙等级
凝气期Loader（基础功法）
// 该Loader处理.txt/.md等无属性灵气，原样搬运
module.exports = function(source) {
return source;
};
筑基期Loader（简单转化）
// 该Loader将.less文件转化为.css
module.exports = function(source) {
// 简单的文本替换示例
return source.replace(/color:\s*red;/, 'color: blue;');
};
金丹期Loader（复杂编译）
// 处理复杂的.ts/.jsx等雷系灵气
function simpleLoader(source) {
// 转换示例：将“天地玄黄”替换为“宇宙洪荒”
const result = source.replace(/天地玄黄/g, '宇宙洪荒');
return `export default ${JSON.stringify(result)}`;
}
第二章：渡劫指南——五步炼制Loader法宝
第一步：开炉生火（初始化）
mkdir qi-cultivation-loader
cd qi-cultivation-loader
npm init -y
第二步：刻录功法（创建核心）
// cultivation-loader.js
module.exports = function(source) {
console.log("🀄️ 检测到灵根属性:", this.resourcePath);
// 异步处理
const callback = this.async();
setTimeout(() => {
const transformed = source
.replace(/console.log/g, '御剑术·')
.replace(/error/g, '心魔反噬');
callback(null, transformed);
}, 1000);
};
第三步：淬炼杂质（处理选项）
module.exports = function(source, map, meta) {
const options = this.getOptions();
// 处理净化参数
if (options.purify) {
source = source.replace(/邪魔/g, '＊＊');
}
// 返回转换后的源代码，保持源映射
this.callback(null, source, map, meta);
};
第四步：天雷试炼（单元测试）
const loader = require('./cultivation-loader');
describe('渡劫测试', () => {
it('应抵挡心魔攻击', () => {
const input = 'function test() { console.log("遭遇域外天魔") }';
loader.call({ query: 'purify=true' }, input, (err, output) => {
expect(output).toContain('御剑术·("遭遇＊＊")');
});
});
});
第五步：丹成九转（发布npm）
npm login --registry=https://registry.npmjs.org/
npm publish --access public
第三章：心法口诀
"记住！Loader修炼三大禁忌：
1️⃣ 勿直接修改原灵气（保持纯函数）
2️⃣ 异步回调要结印（callback必须调用）
3️⃣ SourceMap如本命玉牌，不可丢失"
第四章：宗门实战——配置webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.(js|ts)x?$/, // 识别灵根类型
use: [
{
loader: path.resolve(__dirname, 'cultivation-loader'),
options: {
purify: true // 开启心魔净化
}
}
]
}
]
}
};
第五章：走火入魔案例
错误示范：
// 错误的Loader，妄动文件系统
function evilLoader(source) {
const fs = require('fs');
fs.writeFileSync('偷取的秘籍.txt', source); // 魔道行径
return source; // 违背修炼本义
}
正确解法：
const { getOptions } = require('loader-utils');
module.exports = function(source) {
const options = getOptions(this);
// 正派功法应如潺潺流水，返回转换后的结果
return source.replace(/邪魔/g, options.purify ? '＊＊' : '邪魔');
};
（突然，一名弟子口吐鲜血，面前代码冒起黑烟）
弟子："师尊！我的Loader把png转成了乱码！"
老者："痴儿！岂不知需用raw-loader取二进制，再用url-loader炼化成base64？就像炼丹需先文火后武火..."
尾声：飞升时刻
当loader修炼至大圆满境，可：
- 与Plugin法宝组成诛仙剑阵
- 用pitch方法逆转经脉运行
- 借schema-utils验证天机
（老者化作代码星光消散，空中回荡着最后箴言）
"记住，Loader之道不在炫技，而在'单一职责'。就像修仙者不能同时修炼佛道魔三派功法，一个好的Loader应当......"
（玉简突然自燃，显出一行小字：欲知后事如何，且听下回分解《Plugin渡劫指南》）
