内容简介：limit 用于配置需内联的文件字节限制，类型是 Number，默认值为 undefined。如果文件大于限制（以字节为单位），该文件将交由webpack.config.js
npm install --save-dev url-loader
用法
url-loader
功能类似于
file-loader
，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
import img from './webpack-logo.png'
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
常用配置项
limit
limit 用于配置需内联的文件字节限制，类型是 Number，默认值为 undefined。如果文件大于限制（以字节为单位），该文件将交由
file-loader
处理 ，并将所有查询参数传递给它。
webpack.config.js
{
loader: 'url-loader',
options: {
limit: 8192
}
}
mimetype
mimetype 用于设置文件的 MIME 类型。如果未指定，则将使用文件扩展名来查找对应的 MIME 类型。
webpack.config.js
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
fallback
fallback 用于设置当 url-loader 加载的文件大于限制时，所对应的处理器。类型是 String，默认值是 “file-loader”。
webpack.config.js
{
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 文件中。
导入依赖项
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 编码。
获取配置对象及验证
export default function loader(src) {
// Loader Options
const options = getOptions(this) || {};
validateOptions(schema, options, 'URL Loader');
}
url-loader 会先调用 loaderUtils 对象的 getOptions 方法，获取当前 loader 对应的配置对象，然后基于已定义的 Schema，验证配置对象的有效性。对应的 Schema 定义如下：
{
"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
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
标记、数据本身：
data:[<mediatype>][;base64],<data>
mediatype 是个 MIME 类型的字符串，例如 “ image/jpeg
“ 表示 JPEG 图像文件。如果被省略，则默认值为 text/plain;charset=US-ASCII
。
如果数据是文本类型，你可以直接将文本嵌入 (根据文档类型，使用合适的实体字符或转义字符)。如果是二进制数据，你可以将数据进行 base64 编码之后再进行嵌入。
处理 fallback
// 规范化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 有两种工作模式：
- 当文件大小小于 limit 值时，url-loader 将会把文件转为 Data URLs；
- 当文件大小大于 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 参数也不能设置得太大，不然也会导致加载的资源过大，影响页面的加载速度。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
