Почему CopyWebpackPlugin работает не правильно?

Question

[uzi_no_uzi]

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',
      	},
      ]),
  	],
}

Имеется от такой кофиг

Я пытаюсь сжать картинки, но не могу их нормально скопировать в dist после сжатия, сам file-loader копирует картинку в корневую директорию, а copyWebpackPlugin туда, куда нужно, но не сжатую версию?

Как связать copyWebpackPlugin и file-loader?

Сюда кидает file-loader:


Сюда кидает copyWebpackPlugin, это правильный путь, но картинка не сжата

Answer 1

[Эдуард Трайт]

В fileloader можно передать параметр outputPath, который принимает функцию, которая возвращает путь для файла. Вот так сделано у меня. url это имя файла с расширением, resourcePath абсолютный путь к обрабатываемому файлу, context это еще один параметр, который вы можете задать (а можете и не задавать), у меня images, по названию папки, куда я хочу складывать изображения. С помощью регулярного выражения проверяется resourcePath, если совпадает, то кидает файл в указанную папку. Если нет совпадений, то кидает в папку по-умолчанию, которая указана в последнем return. Попробуйте, возможно это то, что вы ищите.

{
          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}`;
                },
              },
            },
          ],
        },

Comments

[igor93]

СПАСИБО

Answer 2

[Михаил]

Во-первых CopyWebpackPlugin работает правильно, он копирует что вам нужно
Во-вторых https://webpack.js.org/plugins/copy-webpack-plugin...

Если вы хотите чтоб ваш файл через file-loader был в img то измените генерируемое имя
name: 'img/[name].[ext]'

Comments

[uzi_no_uzi]

А что делать, если нужно сохранить структуру? Если я сделаю, как Вы написали, то все картинки, независимо от внутренних директорий попадут в dist/img

P. S. img/[path][name]. [ext] не помогают, тогда происходит так: dist/img/src/img/тут структура/pict.jpg

[uzi_no_uzi]

Также попробовал вставить ту строку кода с промисом, что описана в документации, просто выбило ошибку, не найден optimize

[Михаил]

uzi_no_uzi, А где вы optimize определили? Нигде? Не удивительно что ошибку выдает