How to properly set outputPath for file-loader?

Question

webpack

I connected the file-loader to the build process in webpack in this way.

{
  test: /\.(jpe?g|png|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
                    name: "[name].[ext]",
                    outputPath: "img",
                    useRelativePath: true,
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: '65-90',
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        svgo: {
          enabled: false,
        }
      }
    }
  ]
},

Before processing, the pictures lie along this path:

--src
----img
------logo.jpg
------backgrounds
--------img1.jpg
--------img2.jpg
------icons
--------icon1.svg
--------icon2.svg

After processing, the pictures will be saved in this way, i.e. structure not saved

--dist
----img
------logo.jpg
------img1.jpg
------img2.jpg
------icon1.svg
------icon2.svg

I tried to do this: name: "[folder]/[name].[ext]",
All pictures in internal folders are saved correctly, i.e. the structure is preserved, but for those pictures that were originally in src/img, a folder is created in dist/img, i.e. it turns out like this dist/img/img/logo.png
To make it clearer:

--dist
----img
------img
--------logo.jpg
------backgrounds
--------img1.jpg
--------img2.jpg
------icons
--------icon1.svg
--------icon2.svg

How to fix?

Answer 1

"Instead of a thousand words" I answer your question with a working example:

{
  test: /\.(png|jpe?g|gif|svg|webp)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        context: path.resolve(__dirname, 'src'),
      },
    },
  ],
},