自定义 Loader

loader 是一个函数

Loader 的基本使用

/**
 * 自定义 loader, 并且必须返回内容
 * @param {*} context 文件内容
 * @param {*} map sourceMap相关数据
 * @param {*} mate 元数据
 * @returns
 */
module.exports = function (context, map, mate) {
	return context;
};

同步 Loader 和异步 Loader

• 同步 Loader

/**
 * 同步loader, 可以通过 this.callbacl 返回数据、直接 return 返回数据
 */
module.exports = function (context, map, mate) {
	// 方式一
	return context;
	// 方式二
	// 第一个参数: 错误信息
	// 第二个参数：返回的内容
	this.callback(null, context);
};

• 异步 Loader

/**
 * 异步loader的使用，需要调用 this.async 告知 loader-runner 我们需要执行异步操作
 */
module.exports = function (context, map, mate) {
	const callback = this.aync();
	setTimeout(() => {
		callback(null, context);
	}, 2000);
};

传递参数给 Loader

Webpack.config.js

module.exports = {
	module: {
		rules: [
			{
				loader: 'loader名称',
				// 选项值（参数）
				options: {
					name: 'hcj',
					age: 23
				}
			}
		]
	}
}

/**
 * 给 loader 传递参数
 * 1. 通过 loader-utils 这个库来获取参数
 * 2. 通过getOptions获取到传入的options参数
 */
module.exports = function (context, map, mate) {
	const options = this.getOptions();
	console.log('options', options);
	return context;
};

如果需要校验参数，可以使用 schema-utils 这个库进行对 options 参数的校验

自定义 loader 解析 md 文件

// 用于解析 md 文件内容
const { Marked } = require('marked');
const { markedHighlight } = require('marked-highlight');
const hljs = require('highlight.js');

const marked = new Marked(
	// 解析代码时高亮
	markedHighlight({
		langPrefix: 'hljs language-',
		highlight(code, lang) {
			const language = hljs.getLanguage(lang) ? lang : 'plaintext';
			return hljs.highlight(code, { language }).value;
		}
	})
);

module.exports = function (context) {
	const htmlContent = marked.parse(context);
	const innerContent = '`' + htmlContent + '`';
	// 模块化导出 这样可以通过 import 方式导入使用
	return `var code = ${innerContent}; export default code`;
};

main.js

import redme from '../REDME';
// 将解析的 md 内容添加到页面中
document.body.innerHTML = redme;