运行webpack命令，会在dist目录下生成一个js文件，这时候新建一个index.html文件并引入这个js：
这中间的87097d就是上一次运行webpack命令时生成的hash值，如果每次对js改动，然后运行webpack命令，都会引起hash值的变化，也就是说每次都得在index.html中改变引入js名称，这样显然不合理，这时候可以引入html-webpack-plugin插件进行一些流程上的优化
html-webpack-plugin插件
html-webpack-plugin可以根据你设置的模板，在每次运行后生成的对应的模板文件，同时所依赖的CSS/JS也都会被引入，如果CSS/JS中含有hash值，则html-webpack-plugin生成的模板文件也会正确版本的CSS/JS文件。
然后看一下这些参数的意义：
1.title：生成的HTML模板的title，如果模板中有设置title的名字，则会忽略这里的设置
2.filename：生成的模板文件的名字
3.template：模板来源文件（html文件）
4.inject：引入模板的注入位置，取值有true/false/body/head
true：默认值，script标签位于html文件的body底部
body:script标签位于html文件的body底部
head:script标签位于html文件的head中
false:不插入生成的js文件，这个几乎不会用到的
5.favicon：指定页面图标，
然后在生成的html中就有一个link标签：
<link rel='shortcut icon' href='example.ico'>
6.minify：使用minify会对生成的html文件进行压缩，默认是false。html-webpack-plugin内部集成了html-minifier，因此，还可以对minify进行配置，常用的配置项是：
caseSensitive:false,//是否大小写敏感
collapseWhitespace:true//是否去除空格
removeAttributeQuotes:true// 去掉属性引用
removeComments:true,//去注释
7.hash：是否生成hash添加在引入文件地址的末尾，这个可以避免缓存带来的麻烦。默认为true。
8.cache：默认是true的，表示内容变化的时候生成一个新的文件。
9.showErrors:：是否将错误信息写在页面里，默认true，出现错误信息则会包裹在一个pre标签内添加到页 面上。
10.chunks:：引入的模块，这里指定的是entry中设置多个js时，在这里指定引入的js，如果不设置则默认全部引入。
更多知识点请参考：https://segmentfault.com/a/1190000013883242
https://segmentfault.com/a/1190000008590102
