webpack打包后css字体图标404，根本原因是url-loader默认生成根路径（如/static/fonts/...），而html部署在子目录（如/admin/）时浏览器请求错误；必须在字体规则的url-loader options中单独配置publicpath: '../../fonts/'（末尾斜杠不可省），且正则需覆盖woff2?|eot|ttf|otf及查询参数，不可与图片规则合并。
Webpack打包后CSS里字体图标404，不是字体没加载，是url()生成的路径错了——关键在url-loader的publicPath配置位置和值。
为什么url-loader处理字体后路径总错
CSS中写的是url(../fonts/icon.woff2)，但打包后变成url(/static/fonts/icon.abc123.woff2)，而HTML部署在子目录（如/admin/）下，浏览器就去https://site.com/static/...找，自然404。问题不在loader没生效，而在它默认用/开头的绝对路径，且这个publicPath必须设在loader自己的options里，不是Webpack全局的output.publicPath。
url-loader处理字体时必须配publicPath
字体文件输出到dist/fonts/，CSS文件在dist/css/app.css，那么CSS里引用字体时，需要向上跨两级才能找到fonts/目录，所以publicPath得设成../../fonts/（注意末尾斜杠）。
- 必须写在字体规则的
url-loader的options中，例如：{ loader: 'url-loader', options: { limit: 10000, name: '[name].[hash:7].[ext]', publicPath: '../../fonts/' } } - 不能写成
/fonts/或fonts/，前者是根路径，后者是相对CSS当前目录，都不对 - 如果用
file-loader替代，也要同样配publicPath: '../../fonts/'，不能只靠outputPath
字体规则别和图片规则合并
虽然都是url-loader，但字体和图片的publicPath需求通常不同：图片可能放在static/img/，字体放static/fonts/，而CSS位置又不同，合并会导致路径冲突。
- 分开写两条规则，各自配独立
publicPath - 字体正则建议覆盖全：
/\.(woff|woff2|eot|ttf|otf)(\?.*)?$/ - 别漏掉查询参数
(\?.*)?，否则iconfont.woff?t=123这类带版本号的会不匹配
验证路径是否生效的最快方法
打包后直接打开dist/css/*.css，搜索url()，看字体路径是不是你预期的相对路径，比如url("../../fonts/icon.abc123.woff2")；如果不是，说明publicPath没生效或写错位置。
最容易被忽略的是：改了url-loader的options.publicPath后没重启webpack-dev-server，或者误改了output.publicPath——那个只影响JS/CSS资源的HTML中src和href，不影响CSS内部的url()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
