javascript - webpack 多入口配置问题， 打包出来的结果变成每个html引用了所有打包的js文件

问题描述

如题应该怎么配置才能让html挂载对应的js文件呢。因为文件带hash，没办法用htmlWebpackPlugin来写死，或者有什么写法可以解决这个问题？

问题解答

可不可以在plugins中定义多个HtmlWebpackPlugin, 每个Plugin中指定对应的Chunk，如下

module.exports = { entry: { ’page1’: ’./apps/page1/scripts/main.js’, ’page2’: ’./apps/page2/src/main.js’ }, output: { path: __dirname, filename: 'apps/[name]/build/bundle.js' }, plugins: [ new HtmlWebpackPlugin({ inject: false, chunks: [’page1’], filename: ’apps/page1/build/index.html’ }), new HtmlWebpackPlugin({ inject: false, chunks: [’page2’], filename: ’apps/page2/build/index.html’ }) ]};回答2：

楼上的做一些修改

var getHtmlConfig = function(name){ return {template : ’./src/view/’ + name + ’.html’,filename : ’view/’ + name + ’.html’,inject : true,hash: true,chunks : [’common’, name] };};plugins: [ new HtmlWebpackPlugin( getHtmlConfig（name1）)， new HtmlWebpackPlugin( getHtmlConfig（name2）)， new HtmlWebpackPlugin( getHtmlConfig（name3）)]

output: { path: ’./dist’, publicPath : ’/dist’, filename: ’js/[name].js’},

你把原来的文件放在src/view下面...生产的文件会放在dist/’view/’ + name + ’.html’