js追加html其他插件失效,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,

}

})

);

}

}