How to overwrite new image paths in WebPack 4?

Question

webpack

Greetings! Images are inserted into the
source as follows: Images are inserted into the source as follows: When WebPack is launched in server mode, images are displayed normally. When building a project in WebPack, it transfers images to another folder ( ), but it does not change the addresses to the transferred images in html and css files. It turns out that the images were transferred, but the addresses to these images remained the same ... How to make WebPack change the addresses in html and css after the transferred images?index.html
<img src="/img/logo.jpg" alt="logo">
index.scss
background-image: url("/img/logo.jpg");
static/img

webpack.config.js

const path = require("path");
const argv = require("yargs").argv;
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const ImageminPlugin = require("imagemin-webpack-plugin").default;
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');

const isDev = argv.mode === "development";
const isProd = !isDev;

module.exports = {
    entry: {
        bundle: "./src/index.js",
    },

    output: {
        path: path.join(__dirname, "prod"),
        filename: `./static/js/[name].js${isProd ? "?[contenthash:5]" : ""}`,
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },

            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: isDev
                        }
                    },
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ]
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),

        new HtmlWebpackPlugin({
            template: "./src/index.html",
            title: isDev ? "Development bundle" : "Production bundle",
            filename: "index.html",
            inject: true,
            minify: {
                collapseWhitespace: isProd,
                removeComments: isProd,
                removeRedundantAttributes: isProd,
                removeScriptTypeAttributes: isProd,
                removeStyleLinkTypeAttributes: isProd,
                useShortDoctype: isProd
            }
        }),

        new MiniCssExtractPlugin({
            filename: `./static/css/[name].css${isProd ? "?[contenthash:5]" : ""}`
        }),

        new CopyWebpackPlugin([
            {
                from: path.join(__dirname, "src/img"),
                to: path.join(__dirname, "prod/static/img"),
            },
            {
                from: path.join(__dirname, "src/fonts"),
                to: path.join(__dirname, "prod/static/fonts"),
            }
        ]),

        new ImageminPlugin({
            disable: isDev,
            plugins: [
                imageminMozjpeg({
                    quality: 80
                }),
                imageminPngquant({
                    quality: [0.7, 0.9],
                    speed: 2
                })
            ]
        }),
    ],

    devtool: isDev ? "source-map" : "",

    devServer: {
        contentBase: path.join(__dirname, "./src"),
        port: 9000,
        open: false,
        inline: true
    },
};

Answer 1

read about aliases