使用带有自定义输出文件名的webpack资源模块

Question

假设我有以下webpack.config.js文件:

module.exports = {
//...
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "assets/[name][ext]",
},
module: {
rules: [
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
plugins: [
//...
],
};

我的问题是如何从图像中分离字体?我想把它们放到子目录中，命名为" font "one_answers";images"在assets文件夹下。我知道这是可能的使用"文件加载器"。但是，我想使用资产模块。

Answer 1

您可以使用Rule.generator.filename属性:

module.exports = {
// ...
module : {
rules : [
// ...
// Fonts
{
test      : /.(woff2?|ttf|eot)(?v=w+)?$/,
type      : 'asset/resource',
generator : {
filename : 'fonts/[name][ext][query]',
}
},
]
},
// ...
}

Answer 2

应该没问题。

{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[hash:8].[name].[ext]',
outputPath: 'fonts/'
}
}
]
},
{
test: /.(png|jpe?g|gif|svg|webp|tiff)(?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[hash:8].[name].[ext]',
outputPath: 'images/'
}
}
]
}