webpack 文件加载器图像到不同的目录

Question

我有 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/',
                    },
                }
            ]
        },

Answer 1

当您将 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
            }
        }
      }
     ]