Why is CopyWebpackPlugin not working correctly?

Question

webpack

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const PATHS = {
  src: path.join(__dirname, '../src'),
  dist: path.join(__dirname, '../dist'),
  js: 'js/bundle.js',
  css: 'css/style.css',
}

module.exports = {
  externals: {
    paths: PATHS,
  },
  entry: {
    app: PATHS.src,
  },
  output: {
    path: PATHS.dist,
    filename: PATHS.js,
    publicPath: '/',
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/',
    }, 
    {
      test: /\.(jpe?g|png|gif|svg)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: "[name].[ext]",
          }
        },
        {
          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,
            }
          }
        }
      ]
    },
    {
      test: /\.less$/,
      use: [
        {
        	loader: 'style-loader',
        },
        {
        	loader: MiniCssExtractPlugin.loader,
        }, 
        {
        	loader: "css-loader",
        	options: {
        		sourceMap: true,
        	}
        },
        {
        	loader: "postcss-loader",
        	options: {
        		sourceMap: true,
        		config:  {
        			path: 'postcss.config.js',
        		}
        	}
        },
        {
        	loader: "less-loader",
        	options: {
            relativeUrls: false,
        		sourceMap: true,
        	}
        }
      ]
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      exclude: '/node_modules/',
      use: [
        {
          loader: 'url-loader?name=[path][name].[ext]',
          options: {
            limit: 8192
          }
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        {
        	loader: 'style-loader',
        },
        {
        	loader: MiniCssExtractPlugin.loader,
        }, 
        {
        	loader: "css-loader",
        	options: {
        		sourceMap: true,
        	}
        },
        {
        	loader: "postcss-loader",
        	options: {
        		sourceMap: true,
        		config:  {
        			path: 'postcss.config.js',
        		}
        	}
        }
      ]
    }]
  },
  	plugins: [
  	  new MiniCssExtractPlugin({
  	    filename: PATHS.css,
  	  }),
  	  new HtmlWebpackPlugin({
  	  	hash: false,
  	  	template: `${PATHS.src}/index.html`,
  	  	filename: 'index.html',
  	  }),
  	  new CopyPlugin([
        {
          from: 'src/img',
          to: 'img',
        },
  	  	{
      	  from: 'src/fonts',
      	  to: 'fonts',
      	},
      ]),
  	],
}

I'm trying to compress images, but I can't copy them properly to dist after compression, the file-loader itself copies the image to the root directory, and copyWebpackPlugin to the right place, but not the compressed version ?
How to link copyWebpackPlugin and file-loader?
file-loader throws here:

copyWebpackPlugin throws here, this is the correct path, but the image is not compressed

Answer 1

The fileloader can be passed an outputPath parameter that takes a function that returns the path for the file. This is how it's done for me. url is the name of the file with extension, resourcePath is the absolute path to the file being processed, context is another parameter that you can set (or not set), I have images, by the name of the folder where I want to add images. Using a regular expression, resourcePath is checked, if it matches, it throws the file into the specified folder. If there are no matches, then it throws it into the default folder, which is indicated in the last return. Try it, maybe this is what you are looking for.

{
          test: /\.(png|jpe?g|gif|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                context: 'images',
                publicPath: (url, resourcePath, context) => {
                  if (/decoration/.test(resourcePath)) {
                    return `../${context}/decoration/${url}`;
                  }

                  return `${context}/${url}`;
                },
                outputPath: (url, resourcePath, context) => {
                  if (/decoration/.test(resourcePath)) {
                    return `${context}/decoration/${url}`;
                  }

                  return `${context}/${url}`;
                },
              },
            },
          ],
        },

Answer 2

Firstly, Copy WebpackPlugin works correctly, it copies what you need
Secondly https://webpack.js.org/plugins/copy-webpack-plugin...
If you want your file through file-loader to be in img then change the generated name
name: 'img/[name].[ext]'