url-loader 和 file-loader的工作方式是相似的,但是可以将较小的文件,转成base64的URI
安装:npm install url-loader -D
url-loader 的 limit
开发中小的图片需要转换,但是大的图片直接使用图片
原因:小的图片转换base64之后可以和页面一起被请求,减少不必要的请求过程。大的图片也进行转换,反而会影响页面的请求速度。
举例:下面的代码 38kb 的图片会进行 base64 编码,而 295kb 的不会。
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [{
loader: "url-loader",
options: {
limit: 100 * 1024,
name: "[name].[hash:8].[ext]",
outputPath: "img"
}
}]
}