html-webpack-plugin插件生成多个html页面引入不同的js文件

webpack中html-webpack-plugin插件生成多个html页面，引入不同的js文件。只要在插件配置文件中加入：chunks:["入口文件名"]即可，如果不加的话，会在生成的html页面中引入所有的入口文件。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{//入口文件
        one:"./src/index.js",
        two:"./src/main.js"
    },
    output:{//输出的文件
        path:path.resolve(__dirname,'dist'),
        filename:'[name].boundle.js'
    },
    mode:"development",
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/one.html',
            filename:'one.html',//生成的html页面的名字为one.html
            title:"one",//它的title为one，记得要在src/one.html中加入<%= %>
            hash:true,
            chunks:['one']
        }),
        new HtmlWebpackPlugin({
            template:'./src/two.html',
            filename:'two.html',
            title:"two",
            hash:true,
            chunks:['two']
        })
    ]

折腾了一下，生成多入口对象：

const path = require('path');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');

let entryFiles = {};

const files = fs.readdirSync(path.resolve(process.cwd(), 'src/js/'));

files.forEach(file=>{
    
    const fileName = path.basename(file, '.ts');

    entryFiles[fileName] = `./src/js/${file}`;

});


const generateMultiplePages = [];

for (const fileName in entryFiles) {

    if (entryFiles.hasOwnProperty(fileName)) {

        generateMultiplePages.push(
            new HtmlWebpackPlugin({
                filename: `${fileName}.html`,
                template: `src/${fileName}.html`,
                chunks:[fileName],
                minify:{
                    // collapseWhitespace: true,
                    removeComments: true,
                }
            })
        );
        
    }

}