qrcode

马上订阅,开启修仙之旅

Webpack loader 之 url-loader

简介

安装

1
npm install --save-dev url-loader

用法

url-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL。

1
import img from './webpack-logo.png'

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}

常用配置项

limit

limit 用于配置需内联的文件字节限制,类型是 Number,默认值为 undefined。如果文件大于限制(以字节为单位),该文件将交由 file-loader 处理 ,并将所有查询参数传递给它。

webpack.config.js

1
2
3
4
5
6
{
loader: 'url-loader',
options: {
limit: 8192
}
}

mimetype

mimetype 用于设置文件的 MIME 类型。如果未指定,则将使用文件扩展名来查找对应的 MIME 类型。

webpack.config.js

1
2
3
4
5
6
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}

fallback

fallback 用于设置当 url-loader 加载的文件大于限制时,所对应的处理器。类型是 String,默认值是 “file-loader”。

webpack.config.js

1
2
3
4
5
6
{
loader: 'url-loader',
options: {
fallback: 'responsive-loader'
}
}

loader 准则

编写 loader 时应该遵循以下准则:

  • 简单易用
  • 使用链式传递。
  • 模块化的输出。
  • 确保无状态
  • 使用 loader utilities
  • 记录 loader 的依赖
  • 解析模块依赖关系
  • 提取通用代码
  • 避免绝对路径
  • 使用 peer dependencies

以上的准则按重要程度排序,但某些仅适用于某些场景。若想进一步了解自定义 loader,可以阅读 编写一个 loader 这个文档。接下来,我们来基于上述的准则分析一下 url-loader 的源码。

url-loader 源码简析

所谓 loader 只是一个导出为函数对象的 JavaScript 模块。loader runner 会调用这个函数,然后把上一个 loader 产生的结果或者资源文件传入进去。函数的 this 上下文将由 webpack 填充,并且 loader runner 具有一些有用方法,可以使 loader 改变为异步调用方式,或者获取 query 参数

其实本文介绍的 url-loader 在处理 limit 范围内文件时,并不是复制文件,而是把文件转成 Data URLs,然后直接内嵌到 html/css/js 文件中。

导入依赖项

1
2
3
4
5
6
7
8
9
import { getOptions } from 'loader-utils';
import validateOptions from 'schema-utils';
import mime from 'mime';

import normalizeFallback from './utils/normalizeFallback';
import schema from './options.json';

// Loader 模式 -> module.exports.raw = loader.raw;
export const raw = true;

需要注意的是,默认情况下 webpack 会对文件内容进行 UTF8 编码,当 loader 需要处理二进制数据时,需要设置 raw 为 true。此后,webpack 用使用 raw-loader 来加载所指定的文件,而不会对文件内容进行 UTF8 编码。

获取配置对象及验证

1
2
3
4
5
6
export default function loader(src) {
// Loader Options
const options = getOptions(this) || {};

validateOptions(schema, options, 'URL Loader');
}

url-loader 会先调用 loaderUtils 对象的 getOptions 方法,获取当前 loader 对应的配置对象,然后基于已定义的 Schema,验证配置对象的有效性。对应的 Schema 定义如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
"type": "object",
"properties": {
"limit": {
"type": ["string", "number"]
},
"mimetype": {
"type": "string"
},
"fallback": {
"anyOf": [
{
"type": "string"
},
{
"additionalProperties": false,
"properties": {
"loader": {
"description": "Fallback loader name",
"type": "string"
},
"options": {
"description": "Fallback loader options",
"anyOf": [
{
"type": "object"
},
{
"type": "string"
}
]
}
},
"type": "object"
}
]
}
},
"additionalProperties": true
}

处理 limit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const file = this.resourcePath; // 资源文件路径
// 获取文件的大小限制
let limit = options.limit;

if (limit) { // 解析为数值型
limit = parseInt(limit, 10);
}
// 获取文件MIME类型
const mimetype = options.mimetype || mime.getType(file);

// No limit or within the specified limit
if (!limit || src.length < limit) {
if (typeof src === 'string') {
src = Buffer.from(src);
}

// 返回Data URLs格式
return `module.exports = ${JSON.stringify(
`data:${mimetype || ''};base64,${src.toString('base64')}`
)}`;
}

Data URLs 由四个部分组成:前缀(data:)、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据本身:

1
data:[<mediatype>][;base64],<data>

mediatype 是个 MIME 类型的字符串,例如 “image/jpeg“ 表示 JPEG 图像文件。如果被省略,则默认值为 text/plain;charset=US-ASCII

如果数据是文本类型,你可以直接将文本嵌入 (根据文档类型,使用合适的实体字符或转义字符)。如果是二进制数据,你可以将数据进行 base64 编码之后再进行嵌入。

处理 fallback

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 规范化fallback参数,处理字符串或对象的形式
// 当options.fallback为字符串时,还会调用loaderUtils
// parseQuery方法解析查询参数
const {
loader: fallbackLoader,
options: fallbackOptions,
} = normalizeFallback(options.fallback, options);

// 获取fallback对应的loader
const fallback = require(fallbackLoader);

// Call the fallback, passing a copy of the loader context. The copy has the query replaced. This way, the fallback
// loader receives the query which was intended for it instead of the query which was intended for url-loader.
const fallbackLoaderContext = Object.assign(
{},
this,
{
query: fallbackOptions,
});

return fallback.call(fallbackLoaderContext, src);

总结

Webpack loader 之 file-loader 文章中,我们简单介绍了 file-loader。那么 url-loader 和 file-loader 之间有什么关系呢?通过阅读 url-loader 源码,我们知道 url-loader 有两种工作模式:

  1. 当文件大小小于 limit 值时,url-loader 将会把文件转为 Data URLs;
  2. 当文件大小大于 limit 值时,url-loader 会默认调用 file-loader 进行处理,参数也会直接传给 file-loader。

简单地说,url-loader 封装了 file-loader。但 url-loader 不依赖于 file-loader,通过配置 fallback 参数,我们可以灵活地设定 fallback Loader。在实际项目中,通过配置 url-loader 的 limit 参数,我们就可以把一些静态资源转成 Data URLs,从而避免过多的 HTTP 请求,从而提高页面的性能。当然 limit 参数也不能设置得太大,不然也会导致加载的资源过大,影响页面的加载速度。

参考资源


欢迎小伙伴们订阅前端修仙之路,及时阅读 Angular、RxJS、TypeScript 和 Node.js 最新文章。

qrcode