【webpage】webpack常用插件之HtmlWebpackPlugin

 

webpack常用插件之HtmlWebpackPlugin

 

1.HtmlWebpackPlugin

使用HtmlWebpackPlugin两大作用：
1为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
2可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

2.插件原理

将 webpack中`entry`配置的相关入口thunk  和`extract-text-webpack-plugin`抽取的css样式  插入到该插件提供的`template`或者`templateContent`配置项指定的内容基础上生成一个html文件，具体插入方式是将样式`link`插入到`head`元素中，`script`插入到`head`或者`body`中。

3.插件使用

varHtmlWebpackPlugin=require('html-webpack-plugin')
webpackconfig={
    ...
    plugins:[newHtmlWebpackPlugin( { } )]
}

4.配置参数详解

title:  生成html文档标题
filename: 输出文件的名字
template: 本地模版的位置
inject:向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。

1、true或者body：所有JavaScript资源插入到body元素的底部
2、head: 所有JavaScript资源插入到head元素中
3、false： 所有静态资源css和JavaScript都不会注入到模板文件中

favicon：添加特定favicon路径到输出的html文档中，这个同title配置项，需要在模板中动态获取其路径值
hash: true|false是否为静态资源生成唯一hash值
chuck:  允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
excludeChunks: 这个与chunks配置项正好相反，用来配置不允许注入的thunk。