Как в webpack 5 картинки и шрифты закинуть в отдельные папки и работать с ними?

В Webpack 5 есть несколько способов управления картинками и шрифтами, включая опции настройки output и module.rules. В данном ответе я покажу пример использования file-loader и url-loader, чтобы скопировать картинки и шрифты в отдельные папки и работать с ними.

1. Установка необходимых пакетов:

npm install --save-dev file-loader
npm install --save-dev url-loader

2. Настройка конфигурации Webpack:

const path = require('path');

module.exports = {
  entry: 'Ваша точка входа',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images', // папка для картинок
              name: '[name].[ext]', // сохранить оригинальные названия
            },
          },
        ],
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'fonts', // папка для шрифтов
            },
          },
        ],
      },
    ],
  },
};

3. Создайте папку "images" и "fonts" в корне проекта или где вам удобно. Webpack будет копировать файлы в эти папки при сборке.

4. Подключение картинок и шрифтов в коде:

import exampleImage from './images/example.png';
import exampleFont from './fonts/example.ttf';

const img = document.createElement('img');
img.src = exampleImage;

const font = new FontFace('exampleFont', `url(${exampleFont})`);
font.load().then(() => {
  document.fonts.add(font);
  document.body.style.fontFamily = 'exampleFont';
});

Если у вас есть дополнительные требования к обработке картинок и шрифтов (например, оптимизация изображений), вы можете использовать другие плагины и лоадеры, такие как image-webpack-loader для обработки изображений, или css-loader для загрузки шрифтов на проекте, где они встречаются через CSS.