html-webpack-plugin之配置自定义模板

主要内容：

• inject： true | body | head |false
• chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk。
• excludeChunks：这个与chunks配置项正好相反，用来配置不允许注入的thunk。

1. true|body: 所有JavaScript资源插入到body元素的底部
2. head: 所有JavaScript资源插入到head元素中。
3. 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模板引擎为例来说明。

    
    
    
    
    
     <% for (var css in htmlWebpackPlugin.files.css) { %>
    
    <% } %>




<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>

<% } %>

htmlWebpackPlugin其实这是html-webpack-plugin插件在生成html文件过程中产生的数据，这些数据对html模板文件是可用的。

htmlWebpackPlugin对象

github相关详细配置