带参数的Webpack4 HTML局部

Question

使用webpack4创建静态应用程序我正在寻找一种将变量传输到局部变量的方法。

这是我的webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Require  html-webpack-plugin plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

var path = require("path");

module.exports = {
    entry: __dirname + "/src/app/index.js", // webpack entry point. Module to start building dependency graph
    output: {
        path: __dirname + '/dist', // Folder to store generated bundle
        filename: 'bundle.js',  // Name of generated bundle after build
        publicPath: '/' // public URL of the output directory when referenced in a browser
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test   : /\.(scss|css)$/,
                resolve: {extensions: [".scss", ".css"],},
                use    : [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'resolve-url-loader?sourceMap',
                    'sass-loader?sourceMap',
                ]
            },
            { test: /\.(html)$/,
                include: path.join(__dirname, 'src/public'),
                use: {
                    loader: 'html-loader',
                    options: {
                        interpolate: true
                    }
                }
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    'file-loader?name=[name].[ext]&outputPath=./images/',
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: false,
                                quality: 10
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    },
                ],
            },
            {
                test: /\.ejs$/,
                use: 'ejs-compiled-loader'
            }

        ]
    },
    plugins: [
            new MiniCssExtractPlugin({
                filename: `styles/[name].css`
            }),
            new HtmlWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: 'src/app/views/index.ejs',
                filename: 'index.html',
                include:'body',
                title: 'Home',
                chunks: ['index']
            }),
            new HtmlWebpackPlugin({
                filename: 'about.html',
                title: 'Praxis',
                template: 'src/public/about.html'
            }),
            new HtmlWebpackPlugin({
                filename: 'appointments.html',
                template: 'src/public/appointments.html'
            }),
            new HtmlWebpackPlugin({
                filename: 'directions.html',
                template: 'src/public/directions.html'
            }),
            new HtmlWebpackPlugin({
                filename: 'privacy.html',
                template: 'src/public/privacy.html'
            }),
            new HtmlWebpackPlugin({
                filename: 'services.html',
                template: 'src/public/services.html'
            })

    ],
    devServer: {  // configuration for webpack-dev-server
        contentBase: './src/public',  //source of static assets
        port: 7700, // port to run dev-server
    }
};

具有以下示例

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
${require('./partials/header.html')}

${require('./partials/footer.html')}
</body>

我希望能够添加一些参数

${require('./partials/header.html')({title: 'Home')}

这种情况下有什么解决方法吗？