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

主要内容：

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模板引擎为例来说明。

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

var json = JSON.parse('')

console.log(json)

htmlWebpackPlugin对象