@uzi_no_uzi

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

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:
5d7362b392745900325698.jpeg

Сюда кидает copyWebpackPlugin, это правильный путь, но картинка не сжата
5d7362fec1488437494919.png
  • Вопрос задан
  • 2932 просмотра
Пригласить эксперта
Ответы на вопрос 2
EdMSL
@EdMSL
Free Developer
В 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}`;
                },
              },
            },
          ],
        },
Ответ написан
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
Во-первых CopyWebpackPlugin работает правильно, он копирует что вам нужно
Во-вторых https://webpack.js.org/plugins/copy-webpack-plugin...

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы