webpack file-loader image to different directories

Question

I have 2 different picture folder.

- src / assets / img / img1.png
- src / content / media / img2.png

the dist directory output this:
- dist / img1.png
- dist / img2.png

but should be like this:
- dist / assets / img / img1.png
- dist / content / media / img2.png

what do I have to change because it works?

{
test: /\.(jpg|png|svg)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'content/media/',
                    },
                }
            ]
        },

What's the question? What would you like to do? – cSteusloff Dec 04 '17 at 13:17 — cSteusloff, Dec 04 '17 at 13:17

Manjunath Satyamurthy · Answer 1 · 2017-12-04T15:08:18.813

When you specify an outputPath as a string it is default for all entry files. Instead you can write and function which returns a different path/filename for different entries.

One more thing to consider is you need a different output based on the path of each entry, so set your name attribute to [path][name].[ext] . This way when you get the filename in your outputPath function, you know which directory to output to.

Below is an example:

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 file-loader image to different directories

1 Answers1