Изучаю Webpack и столкнулся с проблемой добавления картинки с помощью bg-img в css. При этом, если загружаю картинку в js с помощью import, то при дальнейшем выводе ее в консоль - она открывается. В dist эта картинка, которую хочу добавить с помощью url() в css вовсе не открывается. VS предлагает открыть файл использую текстовый редактор.
Внизу прикрепил пару скринов.
путь к картинке указывал с помощью автодополнения
Когда удаляю из правил file-loader, то изображение отображается, При возвращении file-loader - в dist создаётся 2 файла для одного и того же изображения.
Webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
context: path.resolve(__dirname, 'src'),
mode: 'development',
entry: {
main: './index.js',
analytics: './analytics.js',
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|jpeg|svg|gif)$/,
use: ['file-loader'],
},
]
}
}
Project structure:
CSS:
body {
margin: 0;
}
h1 {
text-align: center;
}
.container {
padding: 10px 20px;
background-color: yellowgreen;
}
.logo {
width: 200px;
height: 200px;
margin: 0 auto;
background-image: url('../assets/images/webpack-logo.png');
background-size: cover;
}
Result img: