学习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>
                <%}%>
        <%}%>