手把手教你webpack3（8）url-Loader配置简述

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

多一个字符，实际测试结果，表示差别只有这一个字符而已）；