第 11 卷

22plugins: [new CustomPlugin()] 23};

十五、如何编写一个简单的Webpack Loader?

Webpack Loader 是用于转换特定类型模块的函数，本质上是一个 Node.js 模块，接收源文件内容作为输入，经过处理后输出转换后的内容。编写 Loader 的核心思路是：“输入源文件 → 处理内容 → 输

出转换后内容”，支持同步和异步处理。下面以“将文件内容中的中文转换为拼音”的 chineseto-pinyin-loader 为例，讲解编写流程。

1. 编写Loader的核心规则

• Loader 是一个导出的函数，参数为源文件内容（ source），可选参数为 sourceMap（用于调

试）。

• 同步 Loader 可直接返回转换后的内容，或通过 this.callback(err, result,

sourceMap) 返回（支持多参数）。

• 异步 Loader 需通过 this.async() 获取回调函数，处理完成后调用回调返回结果。

• Loader 支持配置选项，可通过 this.query 或 loader-utils 库的 getOptions 方法获

取配置。

• Loader 应遵循“单一职责”原则，一个 Loader 只做一件事（如转译、替换、压缩），复杂转换可

通过多个 Loader 链式调用。

1. 编写简单Loader的具体步骤

（1）创建Loader文件结构

在项目根目录创建 loaders 文件夹，新建 chinese-to-pinyin-loader.js（Loader 入口文件）：

Code block

1project/ 2├── loaders/

3│└── chinese-to-pinyin-loader.js# 自定义Loader 4├── src/

5│└── index.js# 测试用源文件 6└── webpack.config.js# Webpack配置

1npm install pinyin --save-dev

编写 Loader 代码：

Code block

5

// 拼音格式选项 13default: 'normal'

14} 15}

16};

17 18// 导出Loader函数（同步Loader）

19module.exports = function (source) { 20// 1. 获取Loader配置选项

21const options = getOptions(this) || {};

22 23// 2. 验证配置选项格式

24validateOptions(schema, options, 'ChineseToPinyinLoader');

25 26// 3. 核心转换逻辑：将中文转换为拼音

27const result = pinyin(source, {

（3）配置Webpack，使用自定义Loader

在 webpack.config.js 中配置 module.rules，指定自定义 Loader 的路径：

Code block

1const path = require('path');

2 3module.exports = {

4mode: 'development', 5entry: './src/index.js',

6output: { 7filename: 'bundle.js',

loader.js'), // 自定义Loader路径 18options: {

19style: 'firstLetter' // 配置选项：转换为拼音首字⺟ 20}

21} 22]

23} 24]

25} 26};

（4）创建测试文件，验证Loader效果

在 src/index.js 中编写中文内容：

Code block

1// src/index.js