Why is webpack 5 using wrong image srcs?

Question

webpack

I'm doing a webpack 5 build with the following structure:

-dist
  -assets
    -img
  index.html
-src
  -assets
    -img
  -js
  -styles
  index.html
webpack.common
webpack.dev
webpack.prod

There is an image in index.html with the path assets/img/1.png, but it is not displayed due to the wrong path. If the path src/assets/img/1.png is specified for the image, then it will appear, but this image will not be displayed during production assembly due to the wrong path to it (the src folder is not provided in the dist folder, the assets folder will immediately be there, and there is already an img folder with a picture in it). Those. it turns out index.html from the src folder takes the paths to the files, as if it were in the root of the project. How can I fix this so that I don't move the assets folder out of src and don't create a src folder in dist?

webpack.common:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const dirNode = 'node_modules';
const dirJs = path.join(__dirname, 'src/js');
const dirStyles = path.join(__dirname, 'src/styles');
const dirAssets = path.join(__dirname, 'src/assets');

/**
 * Webpack Configuration
 */
module.exports = env => {
    // Is the current build a development build
    const IS_DEV = !!env.dev;

    return {
       
        entry: {
            main: path.join(dirJs, 'index')
        },

        resolve: {
            extensions: ['.js'],
            modules: [
                dirNode,
                dirJs,
                dirStyles,
                dirAssets
            ]
        },

        plugins: [
            new webpack.DefinePlugin({ IS_DEV }),

            new HtmlWebpackPlugin({
                template: 'src/index.html'
            })
        ],

        module: {
            rules: [
                // BABEL
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            compact: true
                        }
                    }
                },

                // STYLES
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: IS_DEV
                            }
                        },
                    ]
                },

                // CSS / SASS
                {
                    test: /\.scss/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: IS_DEV
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: IS_DEV,
                                sassOptions: {
                                    includePaths: [dirAssets]
                                }
                            }
                        }
                    ]
                },

                // IMAGES
                {
                    test: /\.(png|jpe?g|gif)$/i,
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]'
                        }
                    }
                }
            ]
        },

        optimization: {
            runtimeChunk: 'single'
        }
    };
};

webpack.dev:

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = env => {
    return merge(common(env), {
        mode: 'development',
        // Use eval-cheap-source-map for accurate line numbers, eval has best build performance
        devtool: 'eval',
        output: {
            pathinfo: true,
            publicPath: '/',
            filename: '[name].bundle.js'
        },
        devServer: {
            open: true,
            port: 3000,
        }
    });
};

webpack.prod:

const path = require('path');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const common = require('./webpack.common');

module.exports = env => {
    return merge(common(env), {
        mode: 'production',
        // IMPORTANT: Configure server to disallow access to source maps from public!
        devtool: 'source-map',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].bundle.js'
        },
        plugins: [
            new CleanWebpackPlugin(),

            new CopyPlugin({
                patterns: [
                    { from: path.join(__dirname, 'src/assets'), to: 'assets' }
                ]
            })
        ]
    });
};