html in webpack
痛点：html是我们前端最最基础的也是最接近视图的部分，上文中说到关于css的部分，我们的案例都是要自己创建html文件，然后把打包后的js和css文件手动引入html中。
这样狠繁琐呀，所以本文就是要学习，怎么用webpack实现通过当前的html文件，自动生成一个html文件并把打包后的css和js文件引入。
痛点
在webpack配置文件中，我们生成的当前文件名为：
若在名称后面拼上5倍的hash值，在打包后包的名称后就会自动拼出不定的5倍hash值:
可以看到打包后的文件名都带了hash值
然后，我们就要手动的把html中引入的两个文件名都修改成带hash的名字，这样的话，每次打包名字改变，引入就需要修改，很麻烦，也不科学
解决办法(html-webpack-plugin插件)
html-webpack-plugin可以将html单独抽离出来并且可以进行压缩或者配置
解决过程
下载插件
npm install html-webpack-plugin -D
配置
- 引入
在webpack配置文件中引入插件
- 应用插件
在配置文件中的plugins插件数组里加入该插件
- 配置插件
在插件里配置插件单独抽离出来的html的名称
在我们自己的html中会有一些dom结构，在插件处理后要保证这些dom还在，所以我们需要配置插件要抽离的html的模版
若模版中有注释、空格，我们也可以进行压缩
执行
- 执行webpack命令进行打包
webpack
- 结果
dist打包文件中多出了index.html文件
index.html文件中包好了模版html中的所有内容，还多出了打包后的css和js文件
'意外惊喜'(clean-webpack-plugin插件)
当我以为这个插件学习完了，没啥问题的时候，突然发现，dist文件里，为什么我每次打包后，之前的打包文件还存在文件夹中，这是很不好的体验，也让人分不清哪个是新打包的文件
赶紧寻找解决办法啊，这时候我又学习到了另一个插件，就是clean-webpack-plugin插件(不得不感叹，插件真的是神奇，没有各种插件，我们的开发简直困难重重呀)。
这个插件的作用就是清除上一次打包好的文件
下载
npm install clean-webpack-plugin -D
引入
应用
执行打包
webpack
结果
可以看到dist文件里只有当次打包好的文件了，之前的都删除了
结尾
其实这些小插件还有很多配置，这里只是介绍了我们需要的一些配置，若想进一步了解，这里附上链接 html-webpack-plugin
