webpack 图片优化核心是压缩体积与 webp 格式升级，需通过 image-webpack-loader 显式配置实现自动压缩及 webp 输出，并配合 或插件让浏览器智能加载，同时兼顾格式选型、参数调优与构建前预处理或 cdn 转码等进阶策略。
在 Webpack 中优化图片资源，核心是两件事：压缩体积 + 格式升级。WebP 转换不是默认行为，需要显式配置支持，而压缩则依赖 loader 链式处理。关键不在“能不能做”，而在“怎么配得稳、压得准、转得对”。
用 image-webpack-loader 实现自动压缩与 WebP 输出
这是最常用、兼容性好、可精细调参的方案。它底层基于 imagemin，支持 JPEG/PNG/GIF/WebP 多格式处理。
- 安装依赖：
npm install image-webpack-loader --save-dev（推荐 v8+，注意与 webpack 5 兼容） - 在 webpack.config.js 的 rules 中添加规则，必须放在 file-loader 或 url-loader 之后（因为要处理已输出的文件）：
注意顺序：图片先被 file-loader 拷贝，再被 image-webpack-loader 压缩和转换
{
test: /\.(png|jpe?g|gif|webp)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[contenthash:8].[ext]',
outputPath: 'assets/'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: { progressive: true, quality: 75 },
pngquant: { quality: [0.65, 0.9], speed: 4 },
gifsicle: { interlaced: false },
webp: { quality: 75, lossless: false } // ✅ 开启 WebP 转换
}
}
]
}
这样配置后，所有匹配的 PNG/JPEG/GIF 文件在打包时都会被压缩，并额外生成同名 .webp 文件（例如 icon.png → icon.png + icon.webp），但注意：loader 本身不自动替换 HTML 或 JS 中的引用，需配合其他手段使用 WebP。
让浏览器智能加载 WebP（响应式图片方案）
生成了 WebP 文件，还得让它被真正用上。推荐用 <picture></picture> 标签手动 fallback，或借助插件自动注入。
- 手动方式（推荐用于关键图）：
<picture><source srcset="assets/icon.webp" type="image/webp"> @@##@@ </source></picture>
- 自动化方案（适合大量图片）：用
responsive-loader或自定义插件，根据源图生成多尺寸 + WebP 版本，并返回包含srcSet的对象。但要注意它会增加构建时间，适合中大型项目。
格式选型与压缩参数取舍
不同图片类型，压缩策略差异很大，不能一套参数打天下：
-
JPEG 类照片图：优先调
mozjpeg的quality（65–80 平衡画质与体积），开启progressive提升加载感知 -
PNG 图标/截图：启用
pngquant（有损压缩），禁用optipng（无损但慢），quality: [0.7, 0.9]是较安全区间 -
WebP 输出：设
lossless: false（有损），quality: 70–80；若需完全无损，改用lossless: true，但体积节省有限 - 避免过度压缩：质量低于 60 容易出现明显色块或模糊，尤其文字截图、UI 元素图，建议实测对比
补充建议：构建前预处理 + CDN 自动转码
Webpack 构建期压缩是基础，但还有更高效的组合方式：
-
构建前用脚本批量转 WebP：用 sharp 或 cwebp CLI 批量转换并存为
xxx.webp，Webpack 只负责引用——减少构建压力，提升 CI 速度 - CDN 层自动适配：如 Cloudflare、阿里云 CDN 支持「根据 Accept 头自动返回 WebP」，此时只需上传原图，无需 Webpack 生成 WebP，适合内容型站点
- 慎用 url-loader 内联大图：Base64 会增大 JS 包体积、阻塞解析，>10 KB 的图一律走 file-loader + 单独请求
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
