Как правильно, используя html-webpack-plugin в Webpack, подключать картинки в html, чтобы они грузились в Prod сборке?

Question

[nuffyweb]

Webpack не видит картинки в html (многостраничный сайт) при prod сборке.
Картинки подключаются: ,<img src="/images/logo.svg">
при prod сборке такой же путь, но выдается ошибка "Failed to load resource: net::ERR_FILE_NOT_FOUND"
Изменение пути до картинок на src="images/ или src="./images/ выдает ошибку при dev сборке :

"
Error: Child compilation failed:
Module not found: Error: Can't resolve './images/logo.svg' in 'C:\Ptojects\project\src\html\parts':
Error: Can't resolve './images/logo.svg' in 'C:\Ptojects\fmf\project\src\html\parts'
"
Папка с картинками в dist при сборке перемещается.
Заранее спасибо за любую помощь.

Все html через 'html-webpack-plugin':

/html
-/parts
 --header.html
-/views
 --index.html
 --contacts.html

webpack.config:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
const fs = require('fs');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const PAGES_DIR = path.join(__dirname, "./src/html/views");
const PAGES = fs
    .readdirSync(PAGES_DIR)
    .filter(fileName => fileName.endsWith(".html"));
module.exports = {
    entry: ["babel-polyfill", './src/js/app.js', './src/scss/main.scss'],
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/app.js',
        publicPath: '/',

    },
    module: {
...
        rules: [ 
{
                test: /\.html$/,
                exclude: /node_modules/,
                include: path.resolve(__dirname, './src/parts'),
                use: {
                    loader: 'html-loader',
                    options: {
                        interpolate: true,
                    }
                }
            },


            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            limit: 10000,
                            name: '[name].[ext]',
                            outputPath :  '/images/',
                        },
                    }
                ],

            },
...
plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/main.css',
        }),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, './src/fonts'),
                to: path.resolve(__dirname, './dist/fonts'),
            },
            {
                from: path.resolve(__dirname, './src/images'),
                to: path.resolve(__dirname, './dist/images'),
            }
        ]),
        ...PAGES.map(
            page =>
                new HtmlWebpackPlugin({
                    template: `${PAGES_DIR}/${page}`,
                    filename: `./${page}`,
                    svgoConfig: {
                        removeTitle: false,
                        removeViewBox: true,
                    },
                })
        ),
        new HtmlWebpackInlineSVGPlugin({
            runPreEmit: true,


        }),
    ],

Comments

[xmoonlight]

Предлагаю альтернативу: includeHTML.

includeHTML - Include HTML DOM nodes/parts (loading) via HTML tag into HTML-page for templates and SPA (pure js).