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.