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’