javascript - webpack 多入口配置問題, 打包出來的結果變成每個html引用了所有打包的js文件
問題描述
如題應該怎么配置才能讓html掛載對應的js文件呢。因為文件帶hash,沒辦法用htmlWebpackPlugin來寫死,或者有什么寫法可以解決這個問題?
問題解答
回答1:可不可以在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’
