未加星标

Webpack loader 之 url-loader

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

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 参数也不能设置得太大,不然也会导致加载的资源过大,影响页面的加载速度。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Webpack loader 之 url-loader
本站链接:https://www.codesec.net/view/611092.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(61)