Как обрабатывать изображения в Webpack 5?

Question

Начал изучать Webpack и пока имеется такая конфигурация:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: './index.js'
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jpg|png|svg|jpeg|gif)$/,
                type: 'asset/resource'
            }
        ]
    }
};

Проблема заключается в том что когда в html файле я вставляю картинку <img src="./assets/img/logo.png"> то после сборки картинка не как не обрабатывается и в конечной директории даже не появляется. Хотя если работать с картинкой в js файле import logo from './assets/img/logo.png' то всё прекрасно работает.

Answer 1

Поставьте пакет

   npm i -D copy-webpack-plugin

В файле конфигурации webpack.config.js

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [ new CopyPlugin({
    patterns: [
        {
          from: path.resolve(__dirname, 'src/images'),
          to:   path.resolve(__dirname, 'dist/images')
        }
      ]
    })
  ]
}

Подправьте паттерны и пути под свои задачи. Например, отдельная папка с svg, вторая с картинками, отдельно файл иконки и т.д.

Плагин просто тупо копирует все файлы, какие есть в папках, не размышляя, будут они нужны или нет.

Answer 2

Спасибо за ответ, да copy-webpack-plugin решает эту проблему, но я нашел и другое решение: установка лоадера html-loader. Его можно просто подключить и всё будет работать как надо без всяких дополнительных настроек.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: './index.js'
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ],
    module: {
        rules: [
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jpg|png|svg|jpeg|gif)$/,
                type: 'asset/resource'
            }
        ]
    }
};

БЛОГ НА HUSL

Как обрабатывать изображения в Webpack 5?

Ответы (2 шт):