主要内容：
- inject： true | body | head |false
- chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk。
- excludeChunks：这个与chunks配置项正好相反，用来配置不允许注入的thunk。
-
true|body: 所有JavaScript资源插入到body元素的底部 -
head: 所有JavaScript资源插入到head元素中。 -
false:所有静态资源css和JavaScript都不会注入到模板文件中,一般需要自定义模板配置的时候使用。
一般我们基本不会设置js在head里面，会导致最外层的实例化挂载失败（就是查找不到dom)。
var HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html', //本地自定义模板
inject: true|body
})
一般形式
打包结果
如果设置为false会如何？
我们可以试一下，无疑，页面肯定是出不来的。
什么情况下我们会设置为false呢？
我们一步步往下看
- 配置多个html页面
html-webpack-plugin的一个实例生成一个html文件，如果单页应用中需要多个页面入口，或者多页应用时配置多个html时，那么就需要实例化该插件多次；
shell-insurance-box实例
如上面所述，页面设置了不同的模板；在项目中，我们也可以所有的页面用同一个模板。
公用模板
除了上面这种配置方式，还有另外一种配置自定义模板的方式可以实现需求。具体的做法，借助于模板引擎来实现，例如插件没有配置loader时默认支持的ejs模板引擎，下面就以ejs模板引擎为例来说明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="keywords" content="" />
<meta name="description" content="运营管理系统" />
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
</head>
<body>
<div id="app"></div>
<script>
</script>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
</body>
</html>
htmlWebpackPlugin其实这是html-webpack-plugin插件在生成html文件过程中产生的数据，这些数据对html模板文件是可用的。
<script>
var json = JSON.parse('<%= JSON.stringify(htmlWebpackPlugin)%>')
console.log(json)
</script>
htmlWebpackPlugin对象
网友评论