主题
Webpack Loader
什么是 Webpack Loader?
Loader
(加载器) 是 Webpack
处理非 JavaScript
文件 的工具,将文件转换为 Webpack
能识别的模块(如将 CSS
转换为 JavaScript
字符串,图片转为 Base64
或文件路径)。
本质是一个函数(或模块),接收源文件内容,返回处理后的结果。
js
// 示例:一个简单的 Loader,将内容转为大写
module.exports = function(source) {
return source.toUpperCase();
};
Loader 核心用途
转译代码
- 如
Babel
将ES6+
代码转为ES5
。
- 如
处理静态资源
CSS
、图片、字体等转为JavaScript
可引用的形式。
代码校验与格式化
- 如
ESLint
检查代码规范。
- 如
模板处理
- 如
HTML
模板中插入动态变量。
- 如
常用 Loader 分类与示例
类型 | 常用 Loader | 用途 | 配置示例 |
---|---|---|---|
JavaScript 转译 | babel-loader | 转换 ES6+ 、TypeScript 等 | { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ } |
样式处理 | style-loader +css-loader | 将 CSS 注入 JavaScript ,解析 @import 和 url() | use: ['style-loader', 'css-loader'] |
预处理器 | sass-loader /less-loader | 编译 Sass/Less 为 CSS | use: ['style-loader', 'css-loader', 'sass-loader'] |
文件处理 | file-loader /url-loader | 处理图片、字体,url-loader 支持 Base64 | test: /\.png$/, use: [ { loader: 'file-loader'} ] |
代码校验 | eslint-loader | 代码规范检查 | { test: /\.js$/, use: ['eslint-loader'], enforce: 'pre' } |
模板处理 | html-loader | 处理 HTML 中的资源路径(如 <img src> ) | { test: /\.html$/, use: 'html-loader' } |
如何配置 Loader?
在 webpack.config.js
的 module.rules
中定义规则:
js
module.exports = {
module: {
rules: [
{
test : /\.css$/, // 匹配文件类型
use: [ // 使用的 Loader 数组
'style-loader', // 顺序从后往前执行(或从下到上)
{
loader: 'css-loader',
options: { modules : true } // 配置选项
}
],
exclude: /node_modules/ // 排除目录
}
]
}
};
关键属性:
- test:正则匹配文件扩展名(如
/\.js$/
); - use:指定
Loader
,支持字符串或对象形式(可传参); - exclude/include:缩小处理范围,提升构建速度;
- enforce: 'pre':强制在其它
Loader
前执行(如ESLint
)。
Loader 的工作原理
链式处理
Loader
从右到左(或从下到上)依次执行,前一个Loader
的输出作为下一个的输入。
js
use: [ 'style-loader', 'css-loader' ] // 先执行 css-loader,再 style-loader
同步与异步
- 默认同步执行,可通过
this.async()
返回异步回调。
- 默认同步执行,可通过
js
module.exports = function(source) {
const callback = this.async();
someAsyncTask(source, (err, result) => {
callback(err, result);
});
};
Pitching 阶段
Loader
的pitch
方法在实际执行前被调用,可用于跳过后续Loader
。
js
module.exports.pitch = function(remainingRequest) {
if (shouldSkip) return 'module.exports = "Skipped";';
};
其他注意点
Loader
与Plugin
的区别Loader
处理单个文件,Plugin
在构建流程中扩展功能(如压缩代码)。
自定义 Loader
- 可通过
resolveLoader
配置自定义Loader
路径:
- 可通过
js
resolveLoader: {
modules: [ 'node_modules', './my-loaders' ]
}
性能优化
- 使用
exclude/include
减少不必要的文件处理; - 缓存
Loader
结果(如cache-loader
或babel-loader?cacheDirectory=true
);
- 使用
兼容性
- 注意
Loader
版本与Webpack
的兼容性(如Webpack5
废弃了url-loader
,推荐使用Asset Modules
)。
- 注意