URL-LOADER配置简述
前注：
文档全文请查看 根目录的文档说明。
如果可以，请给本项目加【Star】和【Fork】持续关注。
有疑义请点击这里，发【Issues】。
DEMO地址
1、概述
简单来说，url-loader的效果类似file-loader。
优点：
可以将css文件中的图片链接，转为base64字符串，或移动到打包后文件夹；
缺点：
可配置性比file-loader弱一些，但其实file-loader的那些配置，一般也用不到。
2、配置
2.1、limit
| 名称 | 类型 | 默认值 | 描述 |
| limit | {Number} | undefined | Byte limit to inline files as Data URL |
使用url-loader的唯一目的，可以说就是为了这个，效果是将文件大小低于指定值的图片，转为base64字符串。
值表示小于这个大小的图片会被转码，单位是字节（1024 即 1KB）
配置：
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}css文件：
#app {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
background: url('./logo.png') no-repeat;
box-sizing: border-box;
}
#logo {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
background: url('./logo.jpg') no-repeat;
box-sizing: border-box;
}webpack打包后效果：
url('./logo.jpg')和
url('./logo.png')变为
url(很长一个base64字符串)
注：
- 如果你想
.png文件小于8kb转为base64字符串，但是.jpg文件不管大小多少，都不转为base64字符串； - 那么就需要用
file-loader来搬运.jpg文件，url-loader来搬运和转码.png文件； - 不能尝试两次调用
url-loader来，用两个不同的配置来同时处理两种情况； - 不过这个场景应该出现的极少。
2.2、mimetype
| 名称 | 类型 | 默认值 | 描述 |
| mimetype | {String} | extname | Specify MIME type for the file (Otherwise it's inferred from the file extension) |
这个配置的意思呢，就是说，要不要把其他后缀名的图片文件，统一转为同一种格式的base64编码。
例如：
- 假如我有一个
logo.png和一个logo.jpg图片； - 那么png文件转码后的开头部分是：
data:image/png;base64,； - 而jpg文件转码后的开头部分是：
data:image/jpeg;base64,； - 如果配置这么写：
mimetype: 'image/png'； - 那么开头部分将统一变为：
data:image/png;base64,； - 另外，这个改变只是修改开头部分，但是实际大小是不影响的（当然，
jpeg要比png多一个字符，实际测试结果，表示差别只有这一个字符而已）；
