在之前的webpack学习中，我们将打包好的js文件引入html文件都是手动的，那么如何自动的将打包好的js文件与项目中的html文件关联呢？那么我们来介绍一下插件plugin。
一、安装plugin，我们在项目app-test下局部安装html-webpack-plugin，采用命令：npm install html-webpack-plugin --save-dev，安装成功显示信息为：
安装成功以在webpack.json文件里面devDependencies有显示html-webpack-plugin的版本，显示如下：
二、那么如何使用这个插件呢？
(1)我们在webpack.config.js文件里面引入：
const HtmlWebpackPlugin = require('html-webpack-plugin');(2)然后在下面module.exports下面进行配置：
plugins:[
new HtmlWebpackPlugin()
]现在webpack.config.js文件内容如下：
(3)利用npm run build命令运行一下，这时候在build文件夹下面多了一个index.html文件，它的内容如下：
上述图片显示，该index.html文件自动关联了打包好的三个js文件。
三、下面呢，我们会遇到一个问题，那就是在app-test下面的public下面的index.html的body里面写上“HELLO WORLD"，但是呢，此时打开build下面的index.html，并不会显示HELLO WORLD，那么我们如何将它们关联呢？如果要关联的项目中有具体的html文件，要给html-webpack-plugin的构造函数传入template模板，操作如下：
此时打包好的文件index.html文件内容如下：
这时候我们用浏览器打开build文件夹下面的打包好的index.html，就会在页面中显示HELLO WORLD。
四、下面呢？又遇到了一个疑惑，为什么打包的文件名是Index.html呢？那是因为我们没有在html-webpack-plugin的构造函数中传入filename，默认打包文件名为index.html，如果传入filename:"app.html"，那么打包以后的html文件就叫做app.html，而不是index.html。如下：
五、我们来了解一下html-webpack-plugin的构造函数中的title，它的作用就是给新打包的html文件给一个title，我们光谢如下内容是不行的：
那么我们还要做什么呢？那就是在关联的html文件里面去做关联，我们刚刚是把public下面的index.html进行打包，那我们就去public下面index.html下面进行关联，如何关联如下：
这时再重新运行npm run build，然后再用浏览器打开build下面的app.html，就会发现页面的title改变了，改成首页了。
六、我们来了解一下html-webpack-plugin的构造函数中的inject，它的作用是来确定被打包的html文件引入js，它的script标签应该放在什么地方，它的值有四个：false（不引入）、true（默认body）、head(放在头部)、body（放在body)。 下面我们来测试一下：
再看看打包以后的js文件引入所存放的位置，与之前的进行对比：
七、我们来了解一下html-webpack-plugin的构造函数中的hash，它的值有true和false，它的作用是用来做CDN缓存的，它的减少向服务器请求资源，把它缓存到本地，下面先看一下测试：
我们再来看看打包后的html文件中的js文件后面会跟一串hash值，如下：
八、我们来了解一下html-webpack-plugin的构造函数中的chunks，它的作用是选择你指定的加载块，下面我们来看测试：
那我们再来看看app.html打包文件的js如下：
我们可以看出打包文件只引入了我们指定的test.js和list.js。我们还有一个excludeChunks，它的作用就是引入除了指定的js文件以外的其他js文件，比如excludeChunks:'index'，那么就会引入test和list。
微总结：本次主要了解了html-webpack-plugin这个插件，以及html-webpack-plugin的构造函数的一些参数，当然没有列举完，这是常用的，其他的不常用的可以去github上面看看它们的介绍。