将图片文件转换为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.