Webpack 5 的 asset modules 可直接替代 file-loader 等旧方案，支持音视频、字体等资源；推荐用 asset/resource 处理音视频和字体，生成独立文件并返回 URL；asset/inline 仅适用于极小资源，asset 则按 size 自动切换，实际项目中字体和音视频几乎不内联。
Webpack 5 内置的 asset modules 可直接替代 file-loader、url-loader 等旧方案，处理音频（.mp3, .wav）、视频（.mp4, .webm）和字体（.woff, .woff2, .ttf, .eot, .svg 字体）等媒体资源，无需额外安装 loader，只需在 module.rules 中配置对应类型即可。
asset/resource：稳妥导出独立文件（推荐用于音视频和字体）
适用于体积较大、不宜内联、需浏览器单独请求的资源（如 .mp3, .mp4, .woff2）。它会复制文件到输出目录，并返回一个 URL 字符串。
{
test: /\.(mp3|wav|ogg|mp4|webm|woff|woff2|eot|ttf|svg)(\?.*)?$/i,
type: 'asset/resource',
generator: {
filename: 'assets/[name].[contenthash:8][ext]'
}
}-
generator.filename控制输出路径与命名（支持[name]、[contenthash:8]、[ext]等占位符） - 字体
.svg若用作图标字体（非图像），也建议用asset/resource，避免被误判为图像资源 - 注意：
.svg有双重身份（图像 or 字体），若同时用于<img>和@font-face，建议分开匹配或确保规则顺序合理
asset/inline：小资源转 Data URI（慎用于音视频）
仅适合极小的资源（如几 KB 的提示音、图标字体片段），会转成 base64 内联进 JS/CSS。不推荐用于音频/视频——体积大导致 JS 包膨胀、无法流式加载、缓存失效。
// 示例：仅用于超小提示音（如 notification.wav < 4KB）
{
test: /\.(wav|ogg)$/,
type: 'asset/inline',
// 不设 generator，因为不生成文件
}asset：自动选择 inline or resource（按 size 切换）
类似旧版 url-loader + limit，Webpack 自动判断：小于 parser.dataUrlCondition.maxSize（默认 8 KiB）时内联，否则输出文件。
{
test: /\.(mp3|wav|woff2|woff|ttf)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 // 4KB 以内才内联（通常字体仍建议 resource）
}
},
generator: {
filename: 'assets/[name].[contenthash:8][ext]'
}
}⚠️ 实际项目中，字体和音视频几乎从不内联，所以 asset/resource 更清晰可控。
字体资源特别注意事项
-
.woff2是现代首选字体格式，务必包含在test正则中 - 多种字体格式共存时，确保正则覆盖全（如
/\.(woff2?|eot|ttf|svg)(\?.*)?$/i） - CSS 中
@font-face引用路径要与打包后路径一致（asset/resource返回的是相对 URL，webpack 会自动解析） - 如果字体文件被 CSS 的
url()引用，且你用了css-loader，无需额外配置，它能正确处理asset模块返回的 URL
示例 CSS：
@font-face {
font-family: 'MyFont';
src: url('../fonts/myfont.woff2') format('woff2');
}只要 ../fonts/myfont.woff2 被上述 rule 匹配，就会被打包并替换为正确路径（如 /assets/myfont.abcd1234.woff2）。
完整配置片段参考
module.exports = {
module: {
rules: [
// 音频 & 视频
{
test: /\.(mp3|wav|ogg|mp4|webm)$/i,
type: 'asset/resource',
generator: {
filename: 'media/[name].[contenthash:8][ext]'
}
},
// 字体
{
test: /\.(woff2?|eot|ttf|svg)(\?.*)?$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[contenthash:8][ext]'
}
}
]
},
output: {
assetModuleFilename: 'assets/[name].[contenthash:8][ext]' // 兜底命名规则
}
};✅
output.assetModuleFilename是全局 fallback，当某条 rule 没指定generator.filename时生效，建议统一设置。
不复杂但容易忽略。
