webpack自动生成项目的html

1 自动生成多个html页面

设置webpack.config.js中的plugins属性，多次调用plugin插件(new htmlWebpackPlugin()),同时设置对应数量的.js入口文件

2 指定生成的.html页面中包含的chunk

设置属性 chunks 或者 excludeChunks

plugins: [
	new htmlWebpackPlugin({
		//filename:'index-[hash].html',
		filename:'a.html',
		template: 'index.html',
		//inject:'head',
		//inject:'body',
		inject:false, //为false默认不生成外链引入
		title:'this is a.html',
		//chunks:['main','a']
		excludeChunks:['b','c']
	})

3 把初始化的脚本直接嵌入页面

• （不需要http请求 提高脚本的加载速度和运行速度）而不以链接的形式引入到页面
• 在可以通过inline的方式注入js文件的同时，是没有办法再加入内联js，如果不使用compilation.assets的话是会一直报错的，可以看看插件作者的代码
• compilation.assets是webpack暴露出来可以获取文件数据的方法。通过传文件名路径进这个对象，拿到这个文件的索引，通过调用source拿到文件内容。
  
  compilation.assets需要的是不带publicPath，htmlWebpackPlugin.files.chunks.main.entry带publicPatch，所以用substr()截取。

内连方式引入
<script type="text/javascript" >
		<%=
		compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()
		%>
</script>
外联方式引入
src:
<% for (var k in htmlWebpackPlugin.files.chunks) {%>
	<% if (k !== 'main') {%>
	<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
	<% } %>
	<% } %>