The file entered by webpack is marked with the file name of the path before the file.

/ / Multi-page output configuration
/ / same as the above multi-page entry configuration, read the corresponding html suffix file under the pages folder and put it in the array

var PAGE_PATH = path.resolve(__dirname, "../src/pages")
exports.htmlPlugin = function () {
let entryHtml = glob.sync(PAGE_PATH + "/**/*.html")
let arr = []
entryHtml.forEach((filePath) => {
    let filename = filePath.substring(filePath.lastIndexOf("\/") + 1, filePath.lastIndexOf("."))
    let conf = {
        // path:path.resolve(__dirname, "dist/filename"),
        // 
        template: filePath,
        // 
        filename: filename + ".html",
        // jsjs
        chunks: ["manifest", "vendor", filename],
        inject: true
    }
    if (process.env.NODE_ENV === "production") {
        conf = merge(conf, {
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: "dependency"
        })
    }
    arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}

after this output.

clipboard.png

how to modify to output the parent folder of this file

for example,
pages/aa/bb/bb.html (original file path)
output

dist/aa/bb.html

example 2
pages/aa/bb/cc/cc.html
output is

dist/aa/bb/cc.html

Sep.24,2021

  

let subDirPath = filePath.split ('src/pages/') [1]
{
.
filename: subDirPath,
.
}

Menu