过去在 Webpack4 时,我们处理图片资源通过 file-loader
和 url-loader
进行处理
现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
...,
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
},
],
},
plugins: [],
mode: "development",
};
.box2 {
width: 100px;
height: 100px;
background-image: url("../images/1.jpeg");
background-size: cover;
}
.box3
width: 100px
height: 100px
background-image: url("../images/2.png")
background-size: cover
.box5
width 100px
height 100px
background-image url("../images/3.gif")
background-size cover
npx webpack
打开 index.html 页面查看效果
此时如果查看 dist 目录的话,会发现多了三张图片资源
因为 Webpack 会将所有打包好的资源输出到 dist 目录下
因为经过 style-loader
的处理,样式资源打包到 main.js 里面去了,所以没有额外输出出来
将小于某个大小的图片转化成 data URI 形式(Base64 格式)
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
...,
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
}
},
],
},
plugins: [],
mode: "development",
};
优点:1.减少http请求数量,有时候图片的体积太小,占用一个HTTP会话不是很值得。
2.当http访问外部资源很麻烦或受限时,使用datauri可以解决这个问题
缺点:1.体积变得更大,Base64编码的数据体积通常是原数据的体积4/3,也就是datauri形式的图片会比二进制格式的图片体积大1/3。
2.datauri形式的图片不会被浏览器缓存
3.增加了 CSS 文件的尺寸,增加打包时间
4.IE678兼容性较差
5.移动端不宜使用 Data URI 技术(解码耗 CPU)