Как подключить background-image в webpack5?

В Webpack5 есть несколько способов подключить background-image.

Использование файловой системы: Простейший способ - поместить изображение в папку src/images (или любую другую папку внутри вашего проекта) и затем импортировать его в CSS-файле, который вы уже подключили в своем JavaScript-коде.

/* styles.css */
.background-image {
  background-image: url('../images/background.jpg');
}

/* index.js */
import './styles.css';

Данный код предполагает, что ваша структура проекта выглядит следующим образом:

- src
  - index.js
  - styles.css
  - images
    - background.jpg

Webpack Loader: Другой вариант - использовать Webpack Loader для преобразования и подключения изображений. Для этого вам понадобится установить и настроить несколько пакетов.

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

npm install file-loader css-loader style-loader

Настройка Webpack для использования этих загрузчиков:

/* webpack.config.js */
module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images',
              publicPath: 'images',
            },
          },
        ],
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Добавление изображения в CSS-файл:

/* styles.css */
.background-image {
  background-image: url('./images/background.jpg');
}

Импорт CSS-файла в ваш JavaScript-код:

/* index.js */
import './styles.css';

Теперь ваша структура проекта будет выглядеть так:

- src
  - index.js
  - styles.css
- images
  - background.jpg

Изображение будет автоматически обработано и скопировано в папку dist/images (или другую, указанную в настройках outputPath). Затем оно будет автоматически подключено в вашем CSS.

CSS Modules: Если вы используете CSS Modules, то вы можете встроить изображение в CSS, а затем присвоить класс с этим стилем элементу.

Добавление изображения в CSS-файл:

/* styles.css */
.background-image {
  background-image: url(require('../images/background.jpg'));
}

Импортирование CSS-файла:

/* index.js */
import styles from './styles.css';

Использование класса в JavaScript:

/* index.js */
const element = document.createElement('div');
element.classList.add(styles['background-image']);

Однако помните, что при использовании CSS Modules изображение будет встроено непосредственно в CSS, что означает, что оно не будет автоматически обрабатываться загрузчиком и копироваться в папку dist/images. Если вам нужно скопировать изображение в dist/images, вам придется воспользоваться другими подходами.

Надеюсь, эти подробности помогли вам понять, как подключить background-image в Webpack5.