Webpack неправильно устанавливает путь к изображению в html файле

После сборки проекта Вэбпаком, путь к изображению в HTML указывается неверно.

<img src="fc306942422ede24b19c.jpg">

Вместо:

<img src="img/explore-section1-189905e9.jpg">

При этом нужный мне файл в папке dist появляется, но вместо него Вэбпак ссылается на какой-то мусор. Изображения к которым я ссылаюсь через CSS или JS, отображаются корректно.

конфигурация Вэбпак

//Webpack config
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
path = require('path')
module.exports = (env) => {
    const isProd = env.mode === "production" ? true : false;
    const mode = isProd ? "production" : "development";
    return {
        mode: mode,
        output: {
            filename: "main-[hash:8].js",
            clean: true, //Clean "dist" before every new build
            // path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [
                //html
                {
                    test: /\.html$/,
                    use: ['html-loader'],
                },
                //js rules
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    // use: [{ loader: "babel-loader" }],
                    loader: "babel-loader",
                },
                //css rules
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        {loader: "css-loader"},
                    ],
                },
                //scss rules
                {
                    test: /\.s[ac]ss$/,
                    use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
                },
                //For images
                {
                    test: /\.(png|gif|jpg|jpeg|ico)$/,
                    use: [
                        {
                            loader: "file-loader",
                            options: {
                                outputPath: "img",
                                name: "[name]-[hash:8].[ext]",
                            },
                        },
                    ],
                },

            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: "src/index.html",
            }),
            new MiniCssExtractPlugin({
                filename: "main-[hash:7].css",
            }),
        ],
        devServer: {
            open: true,
        },
        devtool: "source-map",
    };
};

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

Автор решения: Marat Isaev

Насколько я разобрался в вопросе, проблема возникает у тех кто использует Webpack 5. Для решения проблемы я изменил часть конфигурации Вэбпака

 output: {
        filename: "main-[hash:8].js",
        path: path.resolve(__dirname, 'dist'),
        assetModuleFilename: 'images/[hash][ext][query]'
    }

Вместо File-loader для изображений я использовал

            {
                test: /\.(png|gif|jpg|jpeg|ico)$/,
                type: 'asset/resource'
            },

Решение нашел на сайте Вэбпак Гайдс

→ Ссылка