Does the webpack HtmlWebpackInlineSourcePlugin plug-in need to write multiple pages if it is multiple pages?

plugins: [
  new HtmlWebpackPlugin({
        inlineSource: ".(js|css)$" // embed all javascript and css inline
    }),
  new HtmlWebpackInlineSourcePlugin()
]  

HtmlWebpackInlineSourcePlugin plug-in, if there are multiple pages, multiple new HtmlWebpackPlugin () methods will be written. Do you need to write multiple new HtmlWebpackInlineSourcePlugin () methods at the same time?

const webpack = require("webpack");
const path = require("path");
const glob = require("glob");
const CleanWebpackPlugin = require("clean-webpack-plugin"); // dist
const HtmlWebpackPlugin = require("html-webpack-plugin"); // html
const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
//const ExtractTextPlugin = require("extract-text-webpack-plugin"); //css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const final = buildEntriesAndHTML();
const base = {
    entry: final.entries,
    output: {
        filename: "[name]/[name].js",
        path: __dirname + "/dist" //
    },
    module: {
        rules: [
            {
                // 
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "file-loader"
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader", // base64
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            cacheDirectory: true // 
                        }
                    },
                    {
                        loader: path.resolve("./inject-loader.js") // htmlnormalize.css
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {
                            interpolate: "require"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(["dist"]),
        new webpack.ProvidePlugin({
            //jq
            $: "jquery"
        }),
        //new ExtractTextPlugin("[name].css"), // 
        new MiniCssExtractPlugin({
            filename: "[name]/[name].css",
            chunkFilename: "[id].css"
        }),
        ...final.htmls
    ],
    resolve: {
        extensions: [".js", ".json", ".jsx", ".css"]
    },
    externals: {} // requirecdn
};

function buildEntriesAndHTML() {
    // entery
    const result = glob.sync("src/**/*.js");
    const config = {
        hash: true,
        inject: true
    };
    const entries = {};
    const htmls = [];
    result.forEach(item => {
        const one = path.parse(item);
        const outputfile = one.dir.split("/").slice(-1)[0];
        entries[outputfile] = "./" + item;
        htmls.push(
            new HtmlWebpackPlugin({
                ...config,
                template: "./" + one.dir + "/index.html",
                filename: outputfile === "index" ? "./index.html" : "./" + outputfile + "/index.html", // html
                chunks: [outputfile],
        inlineSource:  ".(js|css)$",
            }),
        );
    htmls.push(
    new HtmlWebpackInlineSourcePlugin()
    )
    });
    return {
        entries,
        htmls
    };
}
console.log(base)
module.exports = base;

the above was written by new HtmlWebpackInlineSourcePlugin () only once, but the packaged code is not embedded. Every time I press HtmlWebpackPlugin, the new HtmlWebpackInlineSourcePlugin () package is not embedded either. Is there a great god who can help me to see why?
Project structure is shown in figure

clipboard.png

Source code refer to the god: https://github.com/flytam/web.

Sep.02,2021

what you don't need, you can try it yourself (memory may be a little blurry)
https://www.npmjs.com/package..
Menu