webpack自动生成项目的html

1 自动生成多个html页面

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

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

设置属性 chunks 或者 excludeChunkshtml

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