htmlWebpackPlugin的使用

用途

它将创建一个html文件，将打包好的各种如js、css模块引用进去,并通过提供的各种参数完成多种处理

npm链接 —GitHub

使用

$ 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>

一个参考模板