概述
之前所有的文章都介紹的是如何打包處理各種文件，但是我們最後生成的都是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文件可以直接在瀏覽器運行。