Как настроить Webpack для работы с изображениями?

Question

Webpack обрабатывает изображения через asset modules или загрузчики, такие как file-loader и url-loader. Можно настроить автоматическое копирование изображений в папку сборки или встроить их как данные base64, если они небольшие.

YeaHub · Accepted Answer

Для работы с изображениями Webpack предлагает несколько подходов:Asset Modules (рекомендуемый способ):Позволяет работать с изображениями без дополнительных загрузчиков:module.exports = {
  	module: {
    		rules: [
      		{
        		test: /\.(png|jpe?g|gif|svg)$/i,
        		type: 'asset', // Автоматически выбирает между копированием файла и внедрением данных base64
      		},
    		],
  	},
};Использование file-loader (устарело):Копирует файлы в директорию сборки и возвращает ссылки:module.exports = {
  	module: {
    		rules: [
      		{
        		test: /\.(png|jpe?g|gif)$/i,
        		use: [
          		{
            			loader: 'file-loader',
            			options: {
              				name: '[path][name].[ext]', // Настройка имени файла
           			},
          		},
        		],
      		},
    		],
  	},
};Оптимизация изображений:Для сжатия можно использовать плагины, например, image-minimizer-webpack-plugin:const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
  	plugins: [
    		new ImageMinimizerPlugin({
      			minimizerOptions: {
        			plugins: ['mozjpeg', 'pngquant'],
      			},
    		}),
  	],
};Такой подход позволяет улучшить производительность приложения, уменьшая размер загружаемых ресурсов.