Webpack 5 字体资源优化：集中管理与路径重写
高效管理Webpack项目资源至关重要。本文将详细讲解如何使用Webpack 5 将所有字体文件集中到指定目录，并自动更新 CSS 文件中的引用路径，避免资源分散和路径错误。
问题：字体文件重复及路径错误
在使用Webpack 5 打包样式时，字体文件通常与 CSS 文件位于同一目录。如果希望将字体文件移动到 custom_fonts 子目录，并自动更新 CSS 中的引用路径，直接使用 file-loader 往往会产生字体文件副本，且 CSS 仍然引用旧路径。
初始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)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: 'fonts/',
}
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 2 } },
'resolve-url-loader',
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'styles.css',
}),
]
}
解决方案：利用 resolve-url-loader
file-loader 只移动文件，不修改引用路径。 resolve-url-loader 则能解析 CSS 中的 URL 并更新路径。 通过修改 outputPath 并使用 resolve-url-loader，可以解决字体文件重复和路径错误的问题。
改进后的Webpack配置:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// ... (其余配置不变)
module: {
rules: [
// ... (其余规则不变)
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: 'custom_fonts/', // 修改为 custom_fonts/
}
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 2 } },
'resolve-url-loader', // 保持 resolve-url-loader 的位置
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
}
]
},
// ... (其余配置不变)
}
此配置将字体文件移动到 dist/custom_fonts/ 目录，并自动更新 CSS 中的引用路径。 注意 resolve-url-loader 必须在 sass-loader 之前，以确保正确解析 Sass 文件中的 URL。 现在，你的字体资源得到了集中管理，且 CSS 文件引用路径也正确无误。
