webpack - 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/内容/
媒体/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
            }
        }
      }
     ]