根本原因是file-loader的publicpath未正确配置为相对路径，导致css中生成的图片url与实际部署结构不匹配；应设为如'../images/'使css引用能正确回退目录找到图片。
CSS里background-image: url(../img/logo.png)开发时正常，打包后404——根本不是图片没打进包，而是生成的URL路径没对上部署结构。
为什么file-loader生成的图片路径在CSS里失效
Webpack默认用file-loader（或url-loader）处理图片时，会把文件输出到outputPath指定位置（比如dist/images/xxx.png），但CSS中引用的URL前缀由publicPath决定。这个publicPath不等于output.publicPath，也不是loader外层配置，而是file-loader自己options里的字段。
常见错误现象：
- CSS被抽成
dist/css/app.abc.css，图片在dist/images/logo.def.png，但CSS里写的是url(images/logo.def.png)（缺了../） - 页面部署在子目录（如
/admin/）下打开，浏览器按/images/xxx.png去请求，404 - 本地用
file://打开HTML，路径彻底错乱
关键点：CSS文件所在目录与图片所在目录的相对关系，决定了publicPath该填什么。
file-loader的publicPath必须设为相对路径
假设你打包后目录结构是：
dist/
├── index.html
├── css/
│ └── app.xxx.css ← 这个CSS里要引用图片
└── images/
└── logo.yyy.png
那么app.xxx.css要加载logo.yyy.png，就得写url(../images/logo.yyy.png)——所以file-loader的publicPath应设为../images/。
配置示例（Webpack 4/5）：
{ test: /\.(png|jpe?g|gif|svg)$/i,
use: [{
loader: 'file-loader',
options: {
name: 'images/[name].[contenthash:8].[ext]',
outputPath: 'images',
publicPath: '../images/' // ← 关键：让CSS里生成的URL退一级再进images/
}
}]
}
注意：publicPath值末尾带斜杠；它只影响该loader产出的URL，不影响其他资源。
当CSS被MiniCssExtractPlugin单独抽离时，还要配loader的publicPath
如果你用了MiniCssExtractPlugin，CSS不再走JS模块，而是独立文件。此时file-loader的publicPath依然生效，但MiniCssExtractPlugin.loader自己也有一个publicPath选项，它控制“CSS文件自身相对于HTML的位置”这一层路径计算。
例如HTML在/admin/index.html，CSS在/admin/css/app.css，图片在/admin/images/，那MiniCssExtractPlugin.loader的publicPath应设为../（让CSS里所有相对引用都先退到/admin/再找）。
配置片段：
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' } // ← 不是file-loader的publicPath，是这里的
},
'css-loader',
'postcss-loader'
这个publicPath和file-loader的publicPath是两层：前者管CSS文件怎么找资源，后者管file-loader怎么生成资源URL。
容易踩的三个坑
— file-loader的publicPath写成/images/或images/：前者强制根路径，后者变成相对于CSS文件同级目录，都不对
— 把output.publicPath当成万能解药：它只影响__webpack_require__.p生成的JS动态导入路径，对CSS里url()完全无效
— 混淆outputPath和publicPath：outputPath决定文件物理存放位置，publicPath决定浏览器访问时的URL前缀，两者可以不同（比如outputPath: 'assets/img'，publicPath: '../assets/img/'）
最麻烦的其实是多级子目录部署场景，这时publicPath得手动算层级，没法一劳永逸——别指望靠一个全局配置覆盖所有CSS位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
