Для подключения background-image с использованием Webpack 5 вам понадобится несколько шагов:
1. Установите необходимые пакеты:
Установите пакеты, связанные с загрузкой файлов и обработкой изображений, используя npm:
npm install file-loader url-loader --save-dev
Также установите пакет css-loader, если его еще нет:
npm install css-loader --save-dev
2. Настройте Webpack:
В вашем основном конфигурационном файле Webpack (обычно webpack.config.js), добавьте следующую конфигурацию:
module.exports = {
// ...другие настройки конфигурации Webpack...
module: {
rules: [
// ...другие правила загрузки...
{
test: /.(png|jpe?g|gif)$/i,
loader: 'url-loader',
options: {
limit: 8192, // Подходящие изображения меньше 8kb будут преобразованы в base64 URI
name: 'images/[name].[ext]', // Путь сохранения изображений
},
},
],
},
};
Приведенная выше конфигурация Webpack настраивает загрузчик изображений (url-loader) и определяет правила для файлов с расширениями .png, .jpg, .jpeg и .gif. Если размер изображения меньше 8 килобайт, оно будет преобразовано в base64 URI и встроено в CSS-файл. Если размер изображения больше 8 килобайт, оно будет сохранено в папку images (которую вы можете настроить по своему усмотрению).
3. Настройте CSS-файлы:
В вашем файле CSS, где вы хотите использовать background-image, вы можете использовать обычный синтаксис:
.my-class {
background-image: url(../../img/main_img.png);
}
Изображение будет обработано и подключено автоматически благодаря настроенному Webpack.
4. Запустите сборку проекта:
Для запуска сборки проекта с использованием Webpack выполните команду:
npx webpack
Или, если вы настроили собственный скрипт в package.json, запустите его.
Webpack соберет ваши файлы, вставит изображения в CSS и разместит их в указанной папке (если файлы превышают указанный порог размера).
В результате, после сборки проекта, ваш background-image должен быть правильно подключен и работать вместе с Webpack.