用途
它将创建一个html文件,将打包好的各种如js、css模块引用进去,并通过提供的各种参数完成多种处理
使用
$ npm install html-webpack-plugin –save-dev
然后比如在webpack配置文件中require 并添加实例
常用属性使用
- template:指定将创建的html所使用的模板;
- inject:指定输出的文件在html中什么位置引用,比如inject: ‘head’,就表示各种引用会出现在head标签中;
- filename:用法和webpack配置中的output中的filename一样,就是指定输出的文件名,但不同的是htmlwebpackplugin中可以带路径;
- chunks、excludeChunks:分别为指定加载和排除加载指定模块,后面介绍用途
- minify:HTML文件压缩,其值为对象,具体参数
应用
在实例中(new htmlWebpackPlugin)可以任意定义别的属性,在html文件中可通过模板引擎进行调用,比如实例中有data:’hello’;那么在html模板中就可通过<%= htmlWebpackPlugin.options.data %>
如果想自定义生成的HTML文件中模块的引用,就是哪些引用哪些不引用,那么可以将inject属性置为false后在手工的在html模板中添加这样的代码:(main对应着希望引入的chunk模块名,那么一旦有所指定,别的模块就不会自动的进行引用了)
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
如果是多页面结构呢,因为配置文件中的plugin属性值为数组,htmlwebpackplugin可以添加多个实例到plugin中,但往往不同的页面需要引入的模块是不一样的,这样我们用一个模板怎么做匹配呢,虽然可以在实例中添加一些标识属性,然后在HTML中用模板引擎进行判断,但是这样手工操作量较多,并且很不灵活。我们就可以使用htmlwebpackplugin为我们提供了chunks或excludeChunks这个属性如:
chunks:['main','a']
这个就表示当前实例仅引入chunk名为main和a的两个模块将模块的内容直接加载到html文件中,这样一些初始化类的文件,通用文件就不必去向链接URL请求了,有助于提升性能。方法是:比如js,main模块
<script type="text/javascript">
<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
</script>
一个参考模板