Как правильно перенести картинки после сжатия webpack?

Question

[uzi_no_uzi]

Имеется такой webpack конфиг(Это общая часть dev и build конфига):

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

Проблема в том, что после сжатия картинки попадают в корневую директорию, т.е. в dist, а надо чтобы они попали в dist/img

Как это можно сделать? С помощью CopyPlugin я пытаюсь перенести изображения в папку dist/img и они переносятся, но только не сжатыми.

Как мне сделать перенос картинок уже после сжатия? И попутный вопрос: можно ли сделать так, чтобы имена файлов оставались такими же, какими они были до сжатия, если да, то как?

Comments

[WapSter]

а зачем ты используешь fileloader для картинок, если и так переносишь их через copyplagin?

[uzi_no_uzi]

Тимур Турсунбаев, Я плохо ориентируюсь в webpack, не до конца понимаю как он работает, поэтому и создал вопрос)

Answer 1

[Aхмад Бабаев]

Измени опции file-loader.

options: { name: '[path][name].[ext]', emitFile: false }

Если тебе нужно чтобы все картинки скапливались в директории imgбез сохранения поддиректорий в которых они хранились в папке src ( например src/img/articles/ => dist/img/ ) то

options: { name: 'img/[name].[ext]', emitFile: false }

А emitFile: false служит для отключения вывода файлов, так как они у тебя копируются через copy plugin.