Как решить проблему с загрузкой картинок background-image при сборке webpack?

Чтобы решить проблему с загрузкой картинок background-image при сборке вебпака, существуют несколько подходов, в зависимости от ваших потребностей и настроек проекта.

1. Использование лоадера url-loader или file-loader:
a) Установите нужный лоадер с помощью npm или yarn:

      npm install url-loader --save-dev

или

      yarn add url-loader --dev

b) Настройте лоадер в конфигурации вебпака (webpack.config.js):

      module: {
        rules: [
          {
            test: /.(png|jpe?g|gif|svg)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192, // если размер файла меньше указанного значения (в байтах), то картинка будет представлена в виде inline base64,
                  fallback: 'file-loader', // в противном случае будет использован другой лоадер - file-loader
                  name: '[name].[ext]', // название файла будет сохранено
                  outputPath: 'images', // расположение файлов в итоговой сборке
                  publicPath: '/images' // путь к файлам в итоговом бандле
                },
              },
            ],
          },
        ],
      },

c) Перезапустите сборку вебпака и проверьте, что теперь картинки подгружаются правильно.

2. Использование CSS модулей:
a) Установите пакеты css-loader и style-loader:

      npm install css-loader style-loader --save-dev

или

      yarn add css-loader style-loader --dev

b) Настройте лоадеры в конфигурации вебпака (webpack.config.js):

      module: {
        rules: [
          {
            test: /.(png|jpe?g|gif|svg)$/i,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'images',
                  publicPath: '/images',
                },
              },
            ],
          },
          {
            test: /.css$/,
            use: ['style-loader', 'css-loader'],
          },
        ],
      },

c) В вашем стилевом файле (например, styles.css) импортируйте картинку и задайте ее в качестве background-image:

      .my-element {
        background-image: url('../images/my-image.jpg');
      }

d) Перезапустите сборку вебпака и проверьте, что картинки правильно подгружаются в фоновом изображении.

3. Использование плагина MiniCssExtractPlugin:
a) Установите плагин MiniCssExtractPlugin:

      npm install mini-css-extract-plugin --save-dev

или

      yarn add mini-css-extract-plugin --dev

b) Настройте плагин в конфигурации вебпака (webpack.config.js):

      const MiniCssExtractPlugin = require('mini-css-extract-plugin');

      module.exports = {
        // ...
        plugins: [
          new MiniCssExtractPlugin({
            filename: 'styles.css',
          }),
        ],
        module: {
          rules: [
            {
              test: /.(png|jpe?g|gif|svg)$/i,
              use: [
                {
                  loader: 'file-loader',
                  options: {
                    name: '[name].[ext]',
                    outputPath: 'images',
                    publicPath: '/images',
                  },
                },
              ],
            },
            {
              test: /.css$/,
              use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
          ],
        },
        // ...
      };

c) В вашем стилевом файле (например, styles.css) импортируйте картинку и задайте ее в качестве background-image:

      .my-element {
        background-image: url('../images/my-image.jpg');
      }

d) Перезапустите сборку вебпака и проверьте, что картинки правильно подгружаются в фоновом изображении.

Независимо от выбранного подхода, учтите, что при использовании относительных путей для картинок в CSS, они будут относиться к пути стилевого файла. Если ваш стилевой файл находится в другой директории, необходимо учесть это при указании пути к картинке.