How to properly transfer images after webpack compression?

Question

webpack

There is such a webpack config (This is a common part of the dev and build config):

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

const ImageminPlugin = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");
const imageminJpegtran = require("imagemin-jpegtran");
const imageminOptipng = require("imagemin-optipng");
const imageminSvgo = require("imagemin-svgo");


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]"
          }
        }
      ]
    },
    {
      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: {
        	  		sourceMap: true,
        	  	}
        	  }
        	]
    }]
  },
  	plugins: [
  	  new MiniCssExtractPlugin({
  	    filename: PATHS.css,
  	  }),
  	  new HtmlWebpackPlugin({
  	  	hash: false,
  	  	template: `${PATHS.src}/index.html`,
  	  	filename: 'index.html',
  	  }),
  	  new CopyPlugin([
  	  	{
      	  from: 'src/fonts',
      	  to: 'fonts',
      	},
      	{
      	  from: 'src/img',
      	  to: 'img'
      	}
      ]),
      new ImageminPlugin({
      	bail: false,
      	imageminOptions: {
      		plugins: [
      	  		imageminGifsicle({
          		  interlaced: true
          		}),
          		imageminJpegtran({
          		  progressive: true
          		}),
          		imageminOptipng({
          		  optimizationLevel: 5
          		}),
          		imageminSvgo({
          		  removeViewBox: true
          		})
      		]
      	}
      }),
  	],
}

The problem is that after compression, the pictures end up in the root directory, i.e. in dist, but it is necessary that they get into dist / img
How can this be done? With CopyPlugin, I'm trying to transfer images to the dist/img folder and they are transferred, but not compressed.
How can I transfer images after compression? And a related question: is it possible to make the file names remain the same as they were before compression, if so, how?

Answer 1

Change file-loader options .
If you need all images to be accumulated in the img directory without saving the subdirectories in which they were stored in the src folder (for example src/img/articles/ => dist/img/ ) then
And emitFile: false serves to disable the output of files, since they are copied from you through the copy plugin.