Loader是Webpack中用于转换非JavaScript模块的机制，核心作用是在模块加入依赖图前预处理文件。它按“从右到左”顺序执行，每个loader接收源文件内容并返回处理结果，最终输出合法JavaScript代码供Webpack解析。例如sass-loader将SCSS转为CSS，css-loader解析CSS依赖，style-loader将样式插入页面。自定义loader通过导出函数实现，可使用this.callback、this.async等API处理同步或异步转换，并借助loader-utils获取配置选项。编写时需注意执行顺序及除最后一个loader外均需返回JS代码。如copyright-loader可自动为JS文件添加版权注释，提升构建灵活性。
Webpack 是前端开发中广泛使用的模块打包工具，它能将各种类型的资源（如 JavaScript、CSS、图片、字体等）视作模块，并通过依赖关系进行打包。而 Webpack 能处理非 JavaScript 模块的关键机制之一就是 loader。理解 loader 的原理，有助于我们更好地定制构建流程，提升开发效率。
什么是 Loader？
Loader 是 Webpack 提供的一种转换文件的机制。它的核心作用是：在模块被添加到依赖图之前，对源文件进行预处理。比如，将 TypeScript 编译为 JavaScript，或将 SCSS 编译为 CSS。
Loader 遵循“从右到左”或“从下到上”的执行顺序。例如：
module: {rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
上面的配置中，一个 .scss 文件会先经过 sass-loader 转为 CSS，再由 css-loader 解析 CSS 中的 @import 和 url()，最后由 style-loader 将 CSS 插入到页面中。
立即学习“Java免费学习笔记（深入）”；
Loader 的基本结构
一个简单的 Loader 是一个导出函数的 Node.js 模块。该函数接收文件内容作为输入，返回处理后的内容。
// my-loader.jsmodule.exports = function(source) {
return source.replace(/console\.log/g, '// console.log');
};
这个 loader 会把代码中的所有 console.log 注释掉。Webpack 在构建时会调用这个函数，并将匹配的文件内容传入。
Loader 函数中的 this 上下文提供了丰富的 API，例如：
- this.callback：用于返回多个结果（如 source map）
- this.async：处理异步操作
- this.resourcePath：当前处理文件的路径
- this.getOptions：获取传入 loader 的选项
Loader 执行流程解析
当 Webpack 解析模块时，遇到 import 或 require 语句，会根据文件扩展名匹配对应的 rule 规则。一旦匹配成功，就会启动 loader 链。
执行过程大致如下：
- 读取原始文件内容（字符串或 Buffer）
- 按 use 数组逆序依次调用每个 loader 的转换函数
- 每个 loader 可以同步或异步处理内容
- 最终输出 JS 模块代码，交给 Webpack 继续解析 AST 和依赖
注意：除了最后一个 loader，其他 loader 必须返回合法的 JavaScript 代码，因为 Webpack 最终需要将其作为模块执行。
编写一个自定义 Loader 示例
假设我们想写一个 loader，自动为每个 JS 文件添加版权注释：
// copyright-loader.jsconst { getOptions } = require('loader-utils');
module.exports = function(source) {
const options = getOptions(this);
const banner = `/* ${options.text || 'Copyright'} */\n`;
return banner + source;
};
使用方式：
use: [{
loader: './copyright-loader.js',
options: { text: 'Created by me' }
}
]
这样每个引入的 JS 文件都会在顶部加上指定的版权信息。
基本上就这些。Loader 的本质是文件转换管道，理解其执行机制和上下文 API，就能灵活实现各种构建需求。不复杂但容易忽略的是执行顺序和返回格式要求。掌握这些，自定义 loader 就不再神秘。
