Webpack处理字体与图标资源的关键在于module.rules配置：字体文件（.woff/.woff2/.ttf/.eot/.svg字体）必须用type: "asset/resource"原样输出至fonts目录，确保@font-face可正确加载；SVG若作图像则按asset规则处理，且需排在字体规则之后；CSS路径、publicPath与TS类型声明须同步匹配。
Webpack 处理字体与图标资源，关键不在 JavaScript 本身，而在于 Webpack 的 module.rules 配置。TypeScript 或 JS 文件里怎么引用（比如 import './iconfont.css' 或 url('./fonts/icon.woff')）只是触发点，真正起作用的是 Webpack 如何识别、加载和输出这些非代码资源。
字体文件（.woff/.woff2/.ttf/.eot/.svg 字体）用 asset/resource
这类资源必须作为独立文件被浏览器请求，不能内联。比如 iconfont 的 @font-face 规则依赖真实 URL，Base64 编码会导致字体无法解析或兼容性问题。
- 匹配所有常见字体后缀
- 输出到
fonts/目录，带哈希命名防缓存 - 确保 CSS 中的
url()路径能被css-loader正确解析
{
test: /\.(woff|woff2|eot|ttf|svg)(\?.*)?$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[contenthash:8][ext]'
}
}注意：.svg 文件有双重身份。如果它被用作图标字体（即放在 @font-face 里），就归入此规则；如果用作图像（比如 <img src="logo.svg">），应单独配置 asset 或 asset/resource，避免冲突。
立即学习“Java免费学习笔记（深入）”；
图标类 SVG 文件（单独的图标图片）按图片规则处理
若项目中直接使用 .svg 作为矢量图（非字体），可和其他图片统一管理：
{
test: /\.(png|jpe?g|gif|webp|svg)$/i,
type: 'asset',
parser: {
dataUrlCondition: { maxSize: 10 * 1024 } // ≤10KB 转 Base64
},
generator: {
filename: 'images/[name].[contenthash:8][ext]'
}
}但务必确保这个规则在字体规则之后（Webpack 按 rules 数组顺序匹配），否则 .svg 字体可能被误当成图像处理。
CSS 中路径要与输出结构一致
比如 iconfont.css 里写的是：
@font-face {
src: url('./iconfont.woff2') format('woff2');
}而 Webpack 把 iconfont.woff2 输出到了 dist/fonts/iconfont.[hash].woff2，那 css-loader 必须能正确解析 ./iconfont.woff2 并重写为 /fonts/xxx.woff2。这就要求：
-
css-loader已启用（通常搭配style-loader使用） -
output.publicPath设置合理（如''或'/'，避免路径错位） - 字体文件放在
src/fonts/，CSS 放在src/css/，相对引用保持层级清晰
TS 项目需声明资源类型（防报错）
在 src/types/index.d.ts 或任意 .d.ts 文件中补充：
declare module '*.woff';
declare module '*.woff2';
declare module '*.ttf';
declare module '*.eot';
declare module '*.svg' {
const content: string;
export default content;
}否则 TypeScript 会提示“找不到模块”，尤其在 import font from './iconfont.woff' 这类显式导入时。
不复杂但容易忽略
