Webpack4: how to deal with images in subfolders

Question

My images separated in different subfolders in src/images directory. When i run creating build with webpack all images are copied to one img folder and images with same name just replace one another.This is my webpack configuration for images:

 {
     test: /\.(png|jpe?g)/i,
     use: [
        {
           loader: "url-loader",
           options: {
              name: "img/[name].[ext]",
              limit: 10000
            }
         },
         {
            loader: "img-loader",
            options: {
                name: "img/[path]/[name].[ext]",
                useRelativePath: true
            }
         }
     ]
 }

Can you please suggest how to configure webpack to separate images using the same folder structure as in src/images. I am new to webpack. Thank you

---

So here is the final answer that works for me:

{
                    test: /\.(png|jpe?g)/i,
                    use: [
                        {
                            loader: "url-loader",
                            options: {
                                name: "img/[path][name].[ext]",
                                context: "src/assets/images",
                                limit: 10000
                            }
                        },
                        {
                            loader: "img-loader",
                            options: {
                                name: "img/[path][name].[ext]",
                                context: "src/assets/images"
                            }
                        }
                    ]
                }

Answer 1

What You're in code is asking Webpack to handle image files with:

loader: "url-loader",
options: {
    name: "img/[name].[ext]",
    limit: 10000
}

which means put all the files in img/[name].[ext] fashion(which puts all the files in a single directory 'img'), where as you want to use "img/[path]/[name].[ext]" to be able to maintain the path structure of original files.

So, change your code block to this:

{
test: /\.(png|jpe?g)/i,
use: [
    {
        loader: "url-loader",
        options: {
            name: "img/[path]/[name].[ext]",
            limit: 10000
        }
    },
    {
        loader: "img-loader",
        options: {
            name: "img/[path]/[name].[ext]",
            useRelativePath: true
        }
    }
  ]
}

Optionally if the directory structure have too many levels, you can use something like:

options: {
    name: "img/[path]/[name].[ext]",
    context: "src" // or whatever common directories above actual images
}