Webpack 5+ 应用 asset/inline 类型替代已废弃的 url-loader，通过 parser.dataUrlCondition.maxSize 控制内联阈值；Vite 则通过 assetsInlineLimit 配置，且 CSS 中 url() 默认不自动转 DataURL，需确保 loader 或解析配置正确启用。
Webpack 中用 url-loader 或 asset/inline 转图片为 DataURL
Webpack 5+ 默认用 asset/inline 类型就能把小图直接转成 base64 DataURL，不用额外装 url-loader——装了反而可能冲突。关键看资源大小阈值和 type 配置是否匹配。
常见错误是写了 rules: [{ test: /\.(png|jpg)/, use: 'url-loader' }] 却没删掉 Webpack 5 自带的 asset 处理规则，导致图片被处理两次，最终生成空 data: 链接或构建报错 ModuleParseError: Module parse failed。
- 正确做法：删掉旧 loader，只配
type: 'asset/inline'，并用parser.dataUrlCondition.maxSize控制上限（单位字节） - 例如：小于 4KB 的 PNG 自动内联：
{ test: /\.(png|jpg|gif)$/i, type: 'asset/inline', parser: { dataUrlCondition: { maxSize: 4 * 1024 } } } - 注意
asset/inline不支持limit参数，用错会静默失效；url-loader的limit是字符串或数字，但 Webpack 5 下已废弃 - 如果用了 CSS-in-JS（比如 styled-components），
background: url(./icon.png)里的路径仍会被处理，但需确保./icon.png在resolve.alias或相对路径下可被模块系统识别
Vite 中通过 assetsInlineLimit 控制图片内联
Vite 默认对 ≤ 4KB 的图片自动转 DataURL，行为由 assetsInlineLimit 决定，不是靠插件或 loader。改这个值比 Webpack 更直接，但容易忽略它影响的是所有静态资源（SVG、字体也适用）。
典型问题：把 assetsInlineLimit 设成 0 后，所有图片都变 DataURL，结果 SVG 图标在 CSS 里用 mask-image: url(...) 时因 base64 编码中含空格或换行导致渲染失败——实际是编码后未做 URL-safe 处理，Vite 内部用的是 base64-js，默认不加 data:image/svg+xml;base64, 前缀以外的转义。
立即学习“前端免费学习笔记（深入）”；
- 在
vite.config.ts中设build: { assetsInlineLimit: 8192 }即可让 ≤8KB 图片内联 - 若需强制某张图内联，可用
new URL('./logo.svg', import.meta.url).href，返回的就是 DataURL（Vite 特性） - SVG 用作 CSS
background时，建议先用svgo压缩并移除多余空白，否则 base64 结果可能含换行符，某些浏览器解析异常
CSS 里 url() 引用的图片为什么没转 DataURL
根本原因：CSS 中的 url() 是字符串字面量，Webpack/Vite 默认只处理 JS/TS 中的 import 或 require()，不会主动解析 CSS 里的路径。除非你用了 css-loader（Webpack）或启用了 Vite 的 CSS 预处理资源解析（默认开启但有边界）。
常见现象：写 div { background: url(./avatar.jpg); }，构建后仍是 url(avatar.abc123.jpg)，没变 base64——这不是 bug，是默认行为。
- Webpack 下需确认
css-loader的url选项为true（默认是 true），且options.esModule不要设为 false，否则资源引用无法被识别 - Vite 中 CSS 里的相对路径默认会被解析，但仅限于
.css文件本身能访问到的路径；若用@import引入外部 CSS，且该文件里有url(../img/x.png)，则可能因路径解析失败而跳过内联 - 绝对路径如
url(/public/logo.png)永远不会被转 DataURL，因为 Vite/Webpack 都把它当作 public 目录直出资源
Base64 DataURL 在 CSS 中的实际限制
DataURL 看似方便，但真塞进 CSS 里会带来几个隐性成本：CSS 文件体积膨胀、无法被浏览器缓存复用、部分老浏览器对超长 DataURL 解析失败（比如 IE11 对 >32KB 的 DataURL 会截断）。
更隐蔽的问题是压缩：Terser 或 CSS 压缩工具（如 csso）可能把 base64 字符串里的 +、/ 当作运算符误删，导致解码失败。Vite 默认用 esbuild 压缩 CSS，它对 base64 处理较稳；Webpack 生态若用 css-minimizer-webpack-plugin，得确认其 minify 配置没启用破坏性优化。
- 上线前务必检查生成的 CSS 是否含完整 base64 字符串，搜索
data:image/看长度是否合理 - 避免在
@keyframes或大量伪元素中重复使用同一张图的 DataURL，会导致 CSS 体积倍增 - 如果项目要兼容 iOS Safari 13.3 以下版本，慎用 DataURL 作为
mask-image或-webkit-mask-image的值，存在渲染白屏风险
事情说清了就结束。DataURL 不是银弹，它省了请求，但把问题从网络搬进了构建流程和运行时解析里。
