0

Имеется такой 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 и они переносятся, но только не сжатыми.

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

1 ответ 1

1

Нужно добавить outputPath в loader для изображений

test: /\.(jpe?g|png|gif|svg)$/,
  use: [{
    loader: 'file-loader',
    options: {
      name: "[name].[ext]",
      outputPath: 'images/'
    }
  }]

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.