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。