折腾：
【基本解决】Webpack中url-loader和file-loader区别以及到底用哪个
期间，需要去搞清楚
url-loader中的DataUrl指的是啥。
what is DataUrl
RFC 2397 – The “data” URL scheme
html – What are “data-url” and “data-key” attributes of <a> tag? – Stack Overflow
javascript – What is the size limit of a Base64 DataURL image? – Stack Overflow
data:urls – what are they and how to use them / Stoyan’s phpied.com
【总结】
（0）定义
DataUrl=Data URL=地址前缀为data:的URL
允许内容创建者嵌入小的文件到文档中。
（1）语法
是：
data:[<mediatype>][;base64],<data> |
mediatype：比如’image/jpeg’，默认为：text/plain;charset=US-ASCII
比如：
data:,Hello%2C%20World! Simple text/plain datadata:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3Dbase64-encoded version of the abovedata:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3EAn HTML document with <h1>Hello, World!</h1>data:text/html,<script>alert(‘hi’);</script> An HTML document that executes a JavaScript alert. Note that the closing script tag is required. background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC”); |
（2）工具
对于把数据编码为base64的话，有很多工具，比如：
Linux类系统中：
uuencode -m input_file_name remotename |
输出：
begin-base64 664 test YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK ==== |
js中的话，可以使用API：
Base64 encoding and decoding – Web APIs | MDN
php中的base64编码：
$ php -r “echo base64_encode(file_get_contents(‘check.png’));” |
（3）限制
而对于DataUrl的最大值的限制，不同浏览器也不太一样：
IE7：不支持DataUrl
Opera 11：65K
Explorer 8：仅限制图像和css等文件的大小
IE8：32KB
IE9：文件最大限制为4GB
（4）作用
DataUrl的其中一个作用是：
通过把本来应该用http链接的方式去加载网络上的图片的方式，变成本地直接加载dataUrl了，从而使得：
减少了Http的请求次数，提高网页加载速度和性能
（5）用法和场景
典型的使用场景是：
对于一个很小的图片，才把图片的数据转换为base64，写成DataUrl的方式
比如某个很小的红色对勾的图片：
一般的写法是：
<img src=”http://phpied.com/images/check.png” /> |
写成DataUrl的方式就是：
<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC” /> |
正因此，对于Webpack中url-loader中，才往往会加上limit的参数，比如：
{test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’} // inline base64 URLs for <=8k images, direct URL |
转载请注明：在路上 » 【已解决】url-loader中的DataUrl的含义