webpack本身不处理css中background-image的url()路径，需借助postcss-url+sharp构建扫描→转码→重写路径链路，实现ts项目中背景图自动转webp并保障路径映射与类型安全。
Webpack 本身不处理 CSS 中 background-image: url(...) 里的图片路径，也不自动转 WebP。要实现“TypeScript 项目中图片自动转 WebP”，关键不是靠 Webpack 原生 loader，而是通过 PostCSS 插件 + 图像处理库（如 sharp）+ TypeScript 类型支持 构建一条扫描→判断→转码→重写路径的链路。
用 postcss-url + sharp 实现 CSS 背景图自动转 WebP
这是最贴近“自动识别未压缩图片并转 WebP”的方案，适用于 Vue/React 等使用 CSS 模块或普通 CSS 的 TS 项目：
- 安装依赖：
npm install -D postcss postcss-url sharp @types/sharp - 在
postcss.config.js中配置插件，启用url: 'rebase'或'copy'触发路径处理 - 编写自定义
transform函数：提取url(./xxx.jpg)→ 根据项目根路径定位文件 → 用sharp检查尺寸/格式 → 若非 WebP 且体积 > 10KB，则生成.webp并返回新路径 - 确保输出目录结构与源路径一致（例如
src/assets/bg.jpg→dist/assets/bg.jpg.webp），否则 CSS 重写后会 404
TS 项目里注意类型和路径解析
TypeScript 不影响 Webpack 构建流程，但需保障工具链类型安全：
-
postcss-url的transform回调函数需用 TS 编写，sharp需@types/sharp支持 - 路径拼接建议用
path.resolve(__dirname, '../', relativePath)，避免硬编码导致跨平台问题 - 若用 Vite，需额外禁用
assetsInlineLimit，防止 WebP 被转成 base64 内联，失去缓存价值
替代方案：构建时预转所有图片（更稳定）
如果 PostCSS 方案调试成本高，可改用构建前批量转换：
- 写一个
scripts/optimize-images.ts：递归扫描src/assets/**/*.{jpg,png}，用sharp批量生成对应.webp - 配合 Webpack 的
asset模块（Webpack 5+）直接引用 WebP：import bgWebp from './bg.jpg.webp'，再在 CSS 中用变量注入 - 用
DefinePlugin注入环境变量标识是否启用 WebP，让运行时逻辑或 CSS 类名切换更可控
别忘了浏览器兼容兜底
自动转 WebP 只解决“生成”，不解决“加载”：
- CSS 中不能只写
background-image: url(xxx.webp)，需配合 JS 检测支持性并在加class="webp" - 对应写两套规则：
.banner { background: url(xxx.jpg); }和.webp .banner { background: url(xxx.webp); } - 检查控制台是否有
net::ERR_ABORTED—— 多半是 WebP 文件没生成，或大小写、路径映射出错（BG.JPG ≠ bg.jpg）
