Webpack字体资源集中管理与CSS路径自动更新
在Webpack项目构建中，字体文件与CSS文件常常散落在同一目录，影响项目结构和维护。本文介绍如何利用Webpack 5将所有字体资源打包到指定子目录，并自动更新CSS中字体文件的引用路径。
开发者常遇到的问题是：使用file-loader将字体文件输出到custom_fonts目录后，CSS文件仍然引用旧路径，导致新目录下的字体文件无法被使用。这是因为file-loader只改变了字体文件输出位置，未修改CSS中的引用路径。
解决方法是结合file-loader和resolve-url-loader。file-loader负责移动字体文件到custom_fonts目录，而resolve-url-loader则解析CSS中的url()引用，并更新路径。
立即学习“前端免费学习笔记（深入）”；
以下是改进后的Webpack配置：
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'production',
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
resolve: {
extensions: ['.ts', '.js', '.scss', '.css']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: 'asset/resource',
generator: {
filename: 'custom_fonts/[hash].[ext]'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 2 } },
'resolve-url-loader', // 关键：自动更新CSS中url()路径
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'styles.css',
}),
]
};
此配置使用asset/resource处理字体文件，并通过generator选项指定custom_fonts为输出路径，文件名包含hash值避免缓存问题。resolve-url-loader是关键，它自动处理CSS中字体文件的引用路径，将相对路径转换为相对于custom_fonts目录的路径。 因此，打包后的字体文件集中在custom_fonts目录，CSS引用路径也自动更新，无需手动修改。
通过以上配置，Webpack可将字体文件打包到custom_fonts目录，并自动更新CSS中的路径，实现字体资源的集中管理。
