Загружается не та картинка Webpack

Question

Есть простой проект, основанный на webpack. Вот его иерархия:

Файл webpack.config.js:

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|svg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: ['file-loader']
            }
        ]
    }
}

Файл styles.css:

@import "roboto.css";

body {
    font-family: 'Roboto', sans-serif;
}

.container {
    padding-top: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

h1 {
    text-align: center;
}

.logo {
    background-image: url('../assets/webpack-logo.png');
    background-size: cover;
    height: 200px;
    width: 200px;
    margin: 0 auto;
}

Файл index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack</title>
</head>
<body>
    <div class="container">
        <h1 style="font-family: sans-serif;">Hello, Webpack!</h1>
        <hr>
        <div class="logo"></div>
    </div>
</body>
</html>

Файл index.js:

import Post from './Post'
import json from './assets/json.json'
import './styles/styles.css'
import WebpackLogo from './assets/webpack-logo.png'

const post = new Post('Webpack', WebpackLogo);

console.log('Post to string:', post.toString())

console.log('JSON', json)

В файл styles.css, в background-image должна идти картинка с хэшем 4769..b2e.png, а идёт bca6d..10aee.png (битая). Вот доказательство:

БЛОГ НА HUSL

Загружается не та картинка Webpack

Ответы (0 шт):