Для работы с изображениями через webpack, необходимо настроить загрузку файлов с помощью определенных loader'ов. В webpack 5 для данной задачи можно использовать `asset modules`, которые заменили предыдущие загрузчики, такие как `file-loader` и `url-loader`.
Давайте шаг за шагом настроим webpack для подключения файла изображения:
1. **Установите webpack и необходимые пакеты:**
```shell
npm install webpack webpack-cli --save-dev
npm install sass sass-loader css-loader style-loader --save-dev
```
Где `sass` и `sass-loader` используются для компиляции SCSS в CSS, `css-loader` для загрузки CSS файлов в ваши JavaScript-модули, а `style-loader` для внедрения стилей в DOM.
2. **Webpack конфигурация:**
Добавьте в ваш `webpack.config.js` конфигурацию для обработки изображений внутри CSS/SCSS:
```javascript
const path = require('path');
module.exports = {
// ваша остальная конфигурация
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader', // 3. внедряет стили в DOM
'css-loader', // 2. переводит CSS в CommonJS
'sass-loader' // 1. компилирует Sass в CSS
]
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource' // настраивает использование asset module для изображений
}
]
},
output: {
// ваша остальная конфигурация вывода
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
assetModuleFilename: 'images/[hash][ext][query]' // путь для сохранения обработанных изображений
}
};
```
3. **Использование изображения в SCSS:**
Теперь, когда наш webpack конфигурирован, вы можете использовать SCSS следующим образом:
```scss
// Предполагается, что файл SCSS находится в папке /scss
// и изображение находится в папке /img относительно корня проекта
.background-image {
background-image: url('../img/main_img.png');
}
```
4. **Импорт SCSS в JavaScript:**
Для применения стилей их необходимо импортировать в ваш основной JavaScript файл:
```javascript
// main.js
import './scss/style.scss'; // Путь к вашему SCSS файлу
```
5. **Сборка проекта:**
Теперь, когда все настроено, вы можете запустить процесс сборки с помощью webpack:
```shell
npx webpack
```
Если все настроено правильно, webpack обработает ваши SCSS файлы и изображения, создав итоговые файлы в указанной в конфигурации выходной папке (обычно `dist`). Файл изображения будет переименован с учетом хеша для кеша в браузере и помещен в папку `images` (или в другую папку, если вы поменяли настройку `assetModuleFilename`).
Убедитесь, что структура вашего проекта соответствует путям, указанным в SCSS и webpack конфигурации.