webpack输入的文件带上这个文件之前的路径文件名

Question

//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中

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',
        // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
        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
}

这样输出后。

怎么修改才可以把这个文件的父文件夹也给输出出来

比如
pages/aa/bb/bb.html （原文件路径）
输出为

dist/aa/bb.html

例子2
pages/aa/bb/cc/cc.html
输出为

dist/aa/bb/cc.html

Answer 1

const path = require('path');
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
const outputDir = path.dirname(path.relative(PAGE_PATH, filePath));

    let conf = {
        // path:path.resolve(__dirname, 'dist/filename'),
        // 模板来源
        template: filePath,
        // 文件名称
        filename: outputDir + '/' + filename + '.html',
        // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
        chunks: ['manifest', 'vendor', filename],
        inject: true
    }

Answer 2

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