How to make subcategories of pictures in dist folder?

Question

webpack

{ 
        test: /\.(jpg|svg|png|gif|webp)$/,
        use:[ {
          loader: 'file-loader',
          options:  {
            name: '[name].[ext]', // version  1
            // name: '[path][name].[ext]', // version  2
            outputPath: 'img',
            publicPath: '/img',
            
            postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
          }

in my project I have such a hierarchy of images in src : src/img/category/fruit/apple.png. , src/img/category/vegetables/tomato.png
with the first option in dist it turns out like this
dist/img/scr/img/category/fruit/apple.png
dist/img/scr/img/category/vegetables/tomato.png
well kind of weird.
With the second one,
dist/img/tomato.png
dist/img/apple.png is better.
But still, I would like the images to fall into subcategories and not fall into one heap.
dist/img/category/fruit/apple.png
dist/img/category/vegetables/tomato.png
As I think it is necessary to get only part of the path from [path]. But I don't know how to do it

Answer 1

options: {
    name: '[path][name].[ext]',
    context: 'src/img',
    outputPath: 'img',
},

I took it from my webpack template.
This moment is even described in the documentation that the structure and hierarchy of folders inside img is preserved, if you read something there. Written without publicPaths and post-transforms, everything is simple.
Configs here - webpack.config.dev.js and webpack.config.prod.js