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
            }
        }
      }
     ]

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

1 个答案: