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.

修改时间 2018-08-23

真诚赞赏,手留余香
赞赏
随机推荐
V8引擎、 libuv 和 N-API
微信支付接口返回“签名错误”的排查方法
树妖1
ffmpeg 拼接视频报错,Found duplicated MOOV Atom. Skipped
Windows 2008 修改远程端口号
如何通过网页启动应用程序
PHP文件上传进度:文件切片上传
Node.js 异步异常处理
Javascript网页打印大全
php判断是手机还是电脑访问