學習webpack4 自動化生成項目的html(下)

webpack打包多個html文件 javascript

        plugins:[
		new htmlWebpackPlugin({
			filename:'index111.html',  //輸出後的html文件
			template:'index.html',
			inject:'body',
			title:'safsdf',
			data:'SDFDSF',
			chunks:['main1']			
		}),
		new htmlWebpackPlugin({
			filename:'index222.html',  //輸出後的html文件
			template:'index.html',
			inject:'body',
			title:'safsdf',
			data:'SDFDSF',
			chunks:['main2']   //頁面中所須要的js
		})
	]

須要注意的是,若是index頁面中加載了js的話,只有第一個文件能夠打包好 ,其餘會報錯html

若是頁面中入加載的js不少 那麼能夠用另外一個屬性excludeChunks:['a']  排除a文件 加載其餘全部文件java

 //能夠吧公共的js放入內聯加載webpack

<script type="text/javascript">
		<%=compilation.assets[htmlWebpackPlugin.files.chunks.main1.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%>
	</script>

  

<% for (var k in htmlWebpackPlugin.files.chunks){%>
		<% if (k!== "main1"){ %>
			<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[k].entry%>"</script>
		<%}%>
	<%}%>
相關文章
相關標籤/搜索