zoukankan      html  css  js  c++  java
  • 学习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>
    		<%}%>
    	<%}%>
    

      

  • 相关阅读:
    学习进度条73
    学习进度条72
    学习进度条71
    学习进度条70
    学习进度条69
    学习进度条68
    学习进度条67
    学习进度条66
    学习进度条65
    elasticsearch
  • 原文地址:https://www.cnblogs.com/yudabing/p/7101124.html
Copyright © 2011-2022 走看看