url-loader

将图片文件转换为base64编码并载入浏览器能够减少http请求数,但是增大了js或html文件的体积,如果图片在项目中的重用度较高,那么每处引用都会生成base64编码,造成了代码的冗余。通过http请求载入到浏览器的文件可以缓存到本地,当图片在项目中的重用度较高时,会为图片的访问增加缓存的便利性,下次访问更快。因此要平衡考虑。

Install
npm install --save-dev url-loader

Usage
url loader与file loader的工作方式相似,但如果文件的体积比byte limit小,就能返回Data Url。

需要用一个查询参数(query parameter)来指定limit。默认是无limit的。

如果文件比limit(以bytes为单位)大,那么webpack就会使用file-loader去处理文件,并且所有的查询参数都会传递给file-loader。

注意:

使用url-loader时不需要安装file-loader。
file-loader中的查询参数(query parameter)用在url-loader设置中同样有效。
require("url-loader?limit=10000!./file.png");
// => DataUrl if "file.png" is smaller than 10kb

require("url-loader?mimetype=image/png!./file.png");
// => Specify mimetype for the file (Otherwise it's inferred from extension.)

require("url-loader?prefix=img/!./file.png");
// => Parameters for the file-loader are valid too
//    They are passed to the file-loader if used.

声明:本站所有文章和图片,如无特殊说明,均为原创发布,转载请注明出处。
随机推荐
WordPress 添加自定义接口
JavaScript 基本语法
Node.js 简介
Express 使用 XSS 模块进行安全过滤
JavaScript 触摸事件
JavaScript 流式传输数据 SSE (Server-Sent Events)
Git 放弃本地修改,强制和之前的某次提交同步
Node.js fs 文件系统模块