Как перезаписать новые пути до изображений в WebPack 4?

Question

Михаил Р. @Mike_Ro

Python, JS, WordPress, SEO, Bots, Adversting

Webpack

Как перезаписать новые пути до изображений в WebPack 4?

Приветствую!

В исходник index.html изображения вставляются следующим образом:
<img src="/img/logo.jpg" alt="logo">

В исходник index.scss изображения вставляются следующим образом:
background-image: url("/img/logo.jpg");

При запуске WebPack в режиме сервера - изображения отображаются нормально. При сборке проекта в WebPack, он переносит изображения в другую папку (static/img), но вот адреса до перенесенных изображений в html и css файлах не изменяет.
Получается, что изображения были перенесены, а адреса до этих изображений остались прежние...

Как заставить WebPack изменять адреса в html и css следом за перенесенными изображениями?

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
    },
};