我有 2 个不同的图片文件夹。
- src/assets/img/img1.png
- src/content/media/img2.png
dist 目录输出:
- dist/img1.png
- dist/img2.png
但应该是这样的:
- dist/assets/img/img1.png
- dist/content/media/img2.png
因为它有效,我必须改变什么?
{
test: /\.(jpg|png|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'content/media/',
},
}
]
},
最佳答案
当您将 outputPath 指定为字符串时,它是所有条目文件的默认值。相反,您可以编写和函数,它为不同的条目返回不同的路径/文件名。
还需要考虑的一件事是您需要根据每个条目的路径进行不同的输出,因此请将您的 name 属性设置为 [path][name].[ext] 。这样,当您在 outputPath 函数中获取文件名时,您就知道要输出到哪个目录。
下面是一个例子:
use: [
{
loader: "file-loader",
options: {
name: '[path][name].[ext]',
outputPath: (file) => {
let path = file.split("src/")[1]; //this will yield assets/img/img1.png
return path
}
}
}
]
关于webpack 文件加载器图像到不同的目录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47633922/