概述
之前所有的文章都介绍的是如何打包处理各种文件，但是我们最后生成的都是js文件，这在浏览器中是不能直接运行的，必须包含在HTML文档中才可以正常运行，那本文就介绍下HtmlWebpackPlugin这个插件的使用。
HtmlWebpackPlugin插件主要是用来生成html结果文件的，它会将我们的js结果文件打包包含到最后的一个html文件中，然后我们直接浏览器运行这个html结果文件就可以了。
具体操作流程
1、根据官网所示，我们输入命令“npm install --save-dev html-webpack-plugin”来安装这个插件，如图：
2、此处使用的demo继续使用前面文章中的demo代码。安装完成后，我们在配置文件中引入这个插件，然后在plugin属性字段下实例化这个插件，如下：
3、引入、实例化之后，执行打包，我们可以看到在dist文件夹下生成了html、css和js三份文件，其中css和js是我们前面文章所写的代码生成的，本文不再关注，本文主要关注生成的html结果文件，因为这是通过HtmlWebpackPlugin这个插件生成的。
打开html文件可看到，它将打包生成的css和js文件都自动加载进来了，只要我们在浏览器里打开此html文件，它就可以正常运行，这就是这个插件的基本使用流程。
同时呢，我们可以修改配置文件中的出口配置部分，修改js的打包结果文件名称，然后重新打包，再次打开html发现，它自动加载的js文件名称也随之发生了变化，如图：
附加内容
文章上述部分介绍了此插件的基本使用，并没有做过多的配置，接下来的这部分内容将进一步讲解一下此插件的一些配置使用。
1、根据官网对此插件的配置介绍，我们先配置此插件的title和filename属性字段。
title字段控制生成的html文件中的<title>标签内的值；filename属性字段代表生成的html文件的名称，如下：
2、再次打包，就可以看到生成的是admin.html，打开此文件发现，它的<title>值是我们在配置文件配置的“My App”，如图：
3、上述介绍了配置结果文件的名称及文件中title标签的值，但是在实际开发中我们可能需要额外的js文件包，额外的html元素，所以，这就需要我们提供自己的html文件，然后通过配置，将我们提供的html文件和其他所有文件一起打包，最终再生成一个html结果文件，最后将这个结果文件在浏览器运行即可。接下来简单介绍下操作流程。
4、在配置文件中新增template属性字段，然后指定我们自己的html文件，在这里，我们根据配置文件，在项目根目录下新建了一个test.html文件，如下：
5、然后根据官网实例的写法，在test.html中加入代码，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>由上述代码可看到，在此html中我们引入了jquery的cdn地址，而且此文件的title标签值的写法是参考插件官网的写法，在这里表示使用配置文件中的title这个属性的值，即“My App”，然后我们打包，查看结果文件，发现它不仅包含了我们自己的js文件，也包含了其他打包后的结果文件，同时，title标签值也得到了相应的值，如图：
6、我们也可以运用前面文章中编写的react组件，将它渲染到页面上。在input.js文件中，我们之前引入过HelloReact组件，但并未使用过它，如图：
7、在此处，我们继续引入React、ReactDom来将HelloReact这个组件渲染到页面上id为test的这个div节点上，如下：
8、我们再次执行打包，然后将结果文件admin.html在浏览器运行，就可以看到我们的react组件已经渲染到了页面上：
总结
本文主要介绍HtmlWebpackPlugin这个插件的使用，此插件的作用就是生成一个html的结果文件，这个文件中自动包含我们打包过程中生成的其他css和js文件，我们将此html文件可以直接在浏览器运行。