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.

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
WP_REST_Response 返回结果类
Node.js 使用 Jest 做单元测试
PHP curl 的用法
Node.js fs 文件系统模块
HTML input radio 单选按钮
JavaScript 表单事件
Express 使用模板引擎 EJS
macOS 使用 crontab 定时任务