css-loader 必须显式启用 url: true 解析 background-image，否则 url() 声明被静默删除；Webpack 5 需配合 asset 模块合理设置 dataUrlCondition.maxSize（推荐 8KB），路径须以 CSS 文件为基准，生产环境必须用 MiniCssExtractPlugin.loader 替代 style-loader。
css-loader 必须启用 url 解析，否则 background-image 被直接丢弃
Webpack 5 不会自动处理 background-image: url("./a.png") 中的路径，除非 css-loader 明确参与解析。它的默认行为是开启 url: true，但一旦你手动配置了 css-loader 选项（比如加了 modules），就可能意外覆盖掉这个默认值。
常见错误现象：background-image 在浏览器中完全不请求图片，DevTools Network 面板里看不到任何图片请求，控制台也无报错——因为 css-loader 直接把整个 url() 声明给删了。
- 显式声明
{ loader: "css-loader", options: { url: true } }，哪怕其他选项都用默认值 - 若启用了 CSS Modules，避免使用
compileType: "icss"，它会禁用所有url()解析 - 第三方库的 CSS（如
node_modules/kindeditor/default.css）被@import进来时，也要确保其路径能被解析；可加issuer: { not: /[\/]node_modules[\/]/ }规则做区分，或统一用importLoaders: 1控制链式解析深度
asset 模块规则必须匹配图片后缀，且 maxSize 设置合理
Webpack 5 废弃了 url-loader + file-loader 组合，改用内置的 type: "asset" 规则。但只配 test: /.(png|jpe?g|gif)$/i 不够——如果 maxSize 设得太大（比如 10MB），小图不会转 base64；设得太小（比如 100B），又可能把本该走文件系统的图强行内联，拖慢 CSS 体积。
- 推荐起始值：
parser: { dataUrlCondition: { maxSize: 8 * 1024 } }（即 8KB） -
test正则必须覆盖你实际写的后缀，比如用了.webp却没写进正则，那图就直接“消失”——Webpack 不报错，只是当普通静态文件忽略 - SVG 文件要单独注意：若用
type: "asset"，默认按二进制处理；若需内联为字符串（便于 CSS 中用mask或filter），得加generator: { emit: false, dataUrl: content => `data:image/svg+xml;utf8,${content}` }
路径基准点永远是 CSS 文件所在目录，不是 JS 或 HTML
写 url(../images/logo.png) 是对的，写 url(./src/images/logo.png) 或 url(/public/logo.png) 很可能是错的——前者路径越界（src/ 不在 CSS 同级或子级），后者绝对路径在子路由部署时会 404。
立即学习“前端免费学习笔记（深入）”；
- 所有相对路径以 CSS 文件物理位置为起点拼接，和
import语句在哪写无关 - 避免在 CSS 里用 Webpack alias（如
~assets），css-loader默认不解析别名；真要用，得配alias+resolve.alias并确认 css-loader 版本 ≥ 6.8.0 - 开发阶段建议全项目统一用相对路径，构建工具（Webpack/Vite）才能正确重写并注入哈希；public 目录下的资源才用绝对路径
url(/logo.png)
生产环境 style-loader 必须换 MiniCssExtractPlugin.loader
开发时用 style-loader 注入 <style> 没问题，但上线后继续这么干会导致 FOUC（内容闪动）、CSS 无法独立缓存、gzip 效率低。而很多人只改了 use 数组，却忘了删掉 style-loader 的残留引用。
- 生产环境规则必须写成：
use: [MiniCssExtractPlugin.loader, "css-loader"]，顺序不能颠倒 -
MiniCssExtractPlugin.loader不处理路径，只负责抽离；所以前面的css-loader必须已把url()转成模块依赖，否则抽出来的 CSS 里还是原始路径，发布后 404 - 如果用了
postcss-loader，它必须放在css-loader之后、MiniCssExtractPlugin.loader之前，否则 autoprefixer 等插件收不到已解析的 AST
路径解析真正卡住的地方，往往不是规则没写，而是 css-loader 没拿到 url()、asset 规则没命中后缀、或者生产环境下抽离时机和路径重写没对齐——这三处任一出问题，背景图都会静默失败。
