https://blog.csdn.net/duola8789/article/details/78844431
什么是图片Base64编码
图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。
这样的意义是：
网页上的每一个图片，都要消耗一个http请求下载而来（所以CSS雪碧图技术应运而生），而将图片编码成为base64格式可以随着html下载的同时下载到本地，从而节省了一次http请求
写法
#fkbx-spch, #fkbx-hspch {
background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">
上面分别是图片的 base64 编码在 css 里面的写法和在 img 标签里的写法。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
exam项目中的配置：
const path = require('path');
module.exports = {
target: 'web',
appEntries: {
examIndex: './app/entries/ExamIndex',
markIndex: './app/entries/MarkIndex'
},
urlLoader: {
test: /\.(jpg|png|gif|svg)(\?.+)?$/,
loader: 'url-loader?limit=8192&name=[name]-[hash:8].[ext]'
},
fileLoader: {
test: /\.(ttf|otf|eot|woff2?)(\?.+)?$/,
loader: 'file-loader?name=[name]-[hash:8].[ext]'
}
};
加载之后，网页中小8kb的图片都被转为了base64编码格式存在：