Webpack4 图片处理实战：Base64、压缩与雪碧图配置详解
本文详细讲解在 Webpack4 环境下如何处理图片资源。内容涵盖利用 url-loader 进行 Base64 编码以优化小图加载，通过 img-loader 配合特定插件实现 PNG 图片压缩，以及使用 postcss-sprites 合成雪碧图以减少网络请求。文中提供了完整的 webpack.config.js 配置代码及常见问题排查思路，帮助开发者优化前端资源加载性能。
Webpack4 图片处理实战：Base64、压缩与雪碧图配置详解
本次课程的代码目录结构如下图所示：
>>> 本节课源码
>>> 所有课程源码
本节课将重点讲解 webpack4 中图片处理的常用基础操作：
- 图片处理与 Base64 编码
- 图片压缩
- 合成雪碧图
准备工作
1. 准备工作
如项目代码目录所示，除了将常见的 app.js 作为入口文件外，我们将使用的 3 张图片放置在 /src/assets/img/ 目录下，并在样式文件 base.css 中引用这些图片资源。
其余打包工作交由 webpack 自动处理即可。样式文件和入口 JS 文件的具体代码如下所示：
/* base.css */
*, body {
margin: 0;
padding: 0;
}
.box {
height: 400px;
width: 400px;
border: 5px solid #000;
color: #000;
}
.box div {
width: 100px;
height: 100px;
float: left;
}
.box .ani1 {
background: url("./../assets/imgs/1.jpg") no-repeat;
}
.box .ani2 {
background: url("./../assets/imgs/2.jpg") no-repeat;
}
.box .ani3 {
background: url("./../assets/imgs/3.png") no-repeat;
}
// app.js
import "style-loader/lib/addStyles";
import "css-loader/lib/css-base";
import "./css/base.css";在处理图片以及进行 base64 编码时，需要依赖 url-loader 工具。
进行图片压缩时，需使用 img-loader 插件，并针对不同类型的图片启用相应的子插件。
而 postcss-loader 和 postcss-sprites 则用于合成雪碧图，从而减少网络请求次数。
因此，在通过 npm 安装相关插件后，package.json 的配置内容如下所示：
{
"devDependencies": {
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"imagemin": "^5.3.1",
"imagemin-pngquant": "^5.1.0",
"img-loader": "^3.0.0",
"postcss-loader": "^2.1.6",
"postcss-sprites": "^4.2.1",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.16.1"
}
}同时，我们编写如下 index.html（假设项目文件已打包完成，直接引入即可）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./dist/app.min.css" rel="external nofollow" >
</head>
<body>
<div id="app">
<div class="box">
<div class="ani1"></div>
<div class="ani2"></div>
<div class="ani3"></div>
</div>
</div>
<script src="./dist/app.bundle.js"></script>
</body>
</html>图片处理与 Base64 编码
2. 图片处理与 Base64 编码
2.1 webpack 配置
为了方便样式提取，我们继续使用 extract-text-webpack-plugin 来提取样式文件。
同时，在 module.rules 选项中进行配置，使 loader 能够识别图片后缀名，并执行指定的处理操作。
具体代码如下：
// webpack.config.js
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
let extractTextPlugin = new ExtractTextPlugin({
filename: "[name].min.css",
allChunks: false
});
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: "style-loader"
},
use: [
{
loader: "css-loader"
}
]
})
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 20000, // size <= 20KB
publicPath: "static/",
outputPath: "static/"
}
}
]
}
]
},
plugins: [extractTextPlugin]
};通过配置 url-loader 的 limit 选项，可以根据图片大小决定是否进行 base64 编码。本次配置设定为：小于 20kb 的图片进行 base64 编码。
2.2 打包结果
前文提到项目中引入了 3 张图片，其中 3.png 是小于 20kb 的图片。在命令行中运行 webpack 进行打包，size 小于 20kb 的图片被编码，最终只打包了 2 个 size 大于 20kb 的图片文件：
打开浏览器的控制台，可以看到我们的图片已经被成功编码：
图片压缩
3. 图片压缩
3.1 压缩配置
图片压缩需要使用 img-loader，此外，针对不同的图片类型，还需引用不同的插件。例如，本项目中使用的是 png 图片，因此需要引入 imagemin-pngquant，并指定压缩率。
我们只需在上面的配置文件中将下方代码：
// ...
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 20000, // size <= 20KB
publicPath: "static/",
outputPath: "static/"
}
}
]
}
// ...替换为下方代码即可。由于执行顺序的问题，我们将 url-loader 的 limit 设置为 1kb，以防止压缩后的 png 图片被 base64 编码：
// ...
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 1000, // size <= 1KB
publicPath: "static/",
outputPath: "static/"
}
},
// img-loader for zip img
{
loader: "img-loader",
options: {
plugins: [
require("imagemin-pngquant")({
quality: "80" // the quality of zip
})
]
}
}
]
}
// ...3.2 打包结果
运行 webpack 打包，查看打包结果：
是的，如你所见，10.5kb 大小的迅雷图标，被压缩到了 1.8kb。图片信息可以去 github 上查看，在文章开头有提及 github 地址。
3.3 遗留问题
并没有解决 jpg 格式图片压缩。根据 img-loader 的官方文档，安装了 imagemin-mozjpeg 插件。
但是这个插件的最新版本是 7.0.0，然而配置后，webpack 启动会报错。
查看了 github 上的 issue，我将版本回退到 6.0.0。可以安装，也可以配置运行，正常打包。但是打包后的 jpg 图片大小并没有变化，也就是说，并没有被压缩！！！
希望有大佬可以指点一下小生，万分感谢
合成雪碧图
4. 合成雪碧图
4.1 webpack 配置
在之前的基础上，配置还是很简单的，loader 的引入和环境变量都在注释里面了：
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
let extractTextPlugin = new ExtractTextPlugin({
filename: "[name].min.css",
allChunks: false
});
/*********** sprites config ***************/
let spritesConfig = {
spritePath: "./dist/static"
};
/******************************************/
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: "style-loader"
},
use: [
{
loader: "css-loader"
},
/*********** loader for sprites ***************/
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: [require("postcss-sprites")(spritesConfig)]
}
}
/*********************************************/
]
})
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 10000, // size <= 20KB
publicPath: "static/",
outputPath: "static/"
}
},
{
loader: "img-loader",
options: {
plugins: [
require("imagemin-pngquant")({
quality: "80"
})
]
}
}
]
}
]
},
plugins: [extractTextPlugin]
};4.2 效果展示
按照我们的配置，打包好的雪碧图被放入了 /dist/static/ 目录下，如下图所示：
4.3 雪碧图的实际应用
雪碧图是为了减少网络请求，所以被处理雪碧图的图片多为各式各样的 logo 或者大小相等的小图片。而对于大图片，还是不推荐使用雪碧图。
除此之外，雪碧图要配合 css 代码进行定制化使用。要通过 css 代码在雪碧图上精准定位需要的图片（可以理解成从雪碧图上裁取需要的图片），更多可以百度或者 google。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
JS表单序列化出现中文乱码怎么解决
2026-11-05 17:21:05
JS代码在线格式化工具推荐：无需安装快速美化
2026-11-05 17:17:49
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45