url-loader

原文地址:https://webpack.js.org/loaders/url-loader/
webpack版本:2.2.1

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

Install

cnpm 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.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,797评论 19 139
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,850评论 0 21
  • 1. 根目录下下载以下模块 npm i file-loader url-loader image-webpack-...
    Robyn_Luo阅读 2,444评论 0 1
  • Webpack的作用 打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。 转换:把...
    greenteaObject阅读 5,739评论 0 2
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 8,593评论 0 5