学习webpack4 自动化生成项目的html,下
webpack打包多个html文件
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的话,只有第一个文件可以打包好 ,其他会报错
如果页面中入加载的js很多 那么可以用另一个属性excludeChunks:['a'] 排除a文件 加载其他所有文件
//可以吧公共的js放入内联加载
<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> <%}%> <%}%>
- 上一篇 »ansible的简单实验
- 下一篇 »webpack务虚扫盲