Webpack打包后CSS背景图路径失效，根本原因是url-loader或file-loader生成的绝对路径与实际部署结构不匹配，需在图片loader的options中配置publicPath为相对路径（如'../../'）以修正URL。
Webpack打包后CSS中background-image路径失效
不是CSS没加载，是图片URL被webpack重写错了。比如开发时background: url(../img/logo.png)能显示，build后变成url(/static/img/logo.abc123.png)，但实际文件在dist/static/img/下，而HTML在子目录（如/admin/）里打开，浏览器就404。
- 根本原因是
url-loader或file-loader生成的路径默认以/开头（绝对路径），而你的部署路径不是根目录 -
publicPath必须设为相对路径（如../../），不能留空或写/ - 这个
publicPath要加在图片loader的options里，不是Webpack的output.publicPath
在webpack.config.js的module.rules中定位图片规则，补上publicPath：
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[name].[contenthash:8].[ext]',
publicPath: '../../' // ← 关键：让CSS里生成的路径退两级
}
}]
}为什么import 'bootstrap/dist/css/bootstrap.css'仍报错找不到文件
报错信息通常是Module not found: Error: Can't resolve './bootstrap.css'或直接白屏无样式——这不是Bootstrap路径写错，而是Webpack压根没配CSS处理规则，或者规则被exclude: /node_modules/拦住了。
- 你当前配置里有这一条：
{ test:/\.css$/, exclude: /node_modules/, include: [ path.resolve(__dirname, "not_exist_path") ] }，它明确跳过了node_modules，所以bootstrap/dist/css/bootstrap.css被无视 - 删掉
exclude，或把bootstrap单独放行（不推荐） - 确保CSS规则在
rules数组里靠前，且没有其他规则提前拦截了.css文件
修正后的最小可用CSS规则：
立即学习“前端免费学习笔记（深入）”；
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}Bootstrap CSS生效但图标字体（woff/ttf）404
Bootstrap的bootstrap.min.css里引用了字体文件，如url("../fonts/glyphicons-halflings-regular.woff2")。Webpack默认不处理这些扩展名，导致字体请求返回404，图标变方块。
- 必须显式配置字体loader，且
test正则要覆盖.woff2?、.ttf、.eot、.svg（注意不是只配.woff） -
publicPath同样要设，否则字体路径也会错位（和背景图同理） - 别用过时的
url?limit=...写法，Webpack 5+要求用url-loader或asset模块类型
推荐写法（Webpack 5+）：
{
test: /\.(woff2?|eot|ttf|otf)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[contenthash:8][ext]'
},
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 // 小于4KB才转base64
}
}
}生产环境CSS打进JS bundle导致首屏慢
开发时用style-loader没问题，但build后如果还用它，所有CSS都会塞进main.js里，JS体积暴增，浏览器得先下载、解析、执行JS才能渲染样式——首屏时间直接翻倍。
- 必须区分环境：开发用
style-loader，生产换MiniCssExtractPlugin.loader -
MiniCssExtractPlugin要提前require并加入plugins数组，否则loader不认识 - 别漏装
mini-css-extract-plugin，它不是Webpack内置插件
loader使用示例：
{
test: /\.(scss|sass|css)$/,
use: [
process.env.NODE_ENV === 'production'
? MiniCssExtractPlugin.loader
: 'style-loader',
'css-loader',
'sass-loader'
]
}真正容易被忽略的是：MiniCssExtractPlugin.loader必须和MiniCssExtractPlugin插件配套使用，且插件的filename选项决定了CSS输出路径——如果它输出到css/子目录，而你的HTML里没配<base href="/css/">，路径又会错。路径问题从来不是单一环节的事，是loader、插件、HTML三者联动的结果。
