webpack使用plugin，打包更便捷_09

html-webpack-plugin，自动生成html文件

之前项目打包后，都是通过手动拷贝的index.html文件来引入打包之后的js文件运行的，
假设我一开始没有dist目录，进行webpack对项目进行打包，打包完成之后，你会发现dist目录下没有index.html文件，需要手动的往里面增加index.html。以后每次打包都这样做的话是很麻烦的。
我们如何解决这个问题呢？接下来讲解一个webpack插件，html-webpack-plugin 就能够帮助我们解决这个问题
首先安装html-webpack-plugin

cnpm installl html-webpack-plugin -D

安装完成之后，在webpack.config.js中引入这个插件，配置如下

安装并配置完成之后，进行打包

有的小伙伴打包会报错，这是由于htmlwebpackplugin4的版本和webpack5不兼容导致的，）
安装指定版本的 html-webpack-plugin插件
cnpm install html-webpack-plugin@5.0.0-alpha.9

打包完成之后，可以看到，插件帮助我们打html也打包到dist下面，并且还引入了dist.js，非常的方便
html-webpack-plugin插件会在打包结束后自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

但是我们打开dist目录下面的html文件，你会 发现我们的字体图标胡罗卜图案并没有显示出来。
这是因为你的index.js中通过id获取dom元素，但是你打包之后的html中并没有id = root的这个元素


那么我们肯定希望它生成的html中是自动有这个id = root的元素的。我们可以在webpack.config.js文件下new HtmlWebpackPlugin中做如下配置，这个配置对象接收一个template模板，我使用src下面的index.html，

那我们重新打包，可以看见再次打包的html比之前多了一个id = root的标签

html-webpack-plugin的作用：
第一步：打包完成之后，以src下面的index.html为模板，在dist生成一个html。
第二步：打包生成的bundle.js注入到index.html中

最后我们自动生成的html中就有了这个胡罗卜字体图标

plugin 可以在webpack运行到某个时刻，帮你做一些事情。类似于vue的生命周期。比如说html-webpack-plugin在你打包结束之后的这个时刻，生成一个html文件，并把打包生成的结果注入到这个文件中，其它的插件会在另外的时刻帮webpack做一些事情

clean-webpack-plugin 打包前清理上一次打包目录

我们修改webpack.config.js中打包输出的文件名，再次进行打包

此时我们可以看见我们打包后的项目中有两个js文件，因为dist.js文件是我们上次打包的js文件并没有被删除掉

所以有时候就造成一些问题，有时候我们希望当你在重新打包的时候，能够帮我们把dist目录先删除，然后再去执行打包
要实现这个功能，我需要借助 cleanWebpackPlugin 插件，这个插件并不是官方推荐的插件，而是一个第三方插件
安装 cleanWebpackPlugin

cnpm install clean-webpack-plugin -D

使用的时候需要注意引入的方式，不然可能会报错

安装并配置完成之后，我们再打一次包,

打包结束我们发现之前的dist.js没有了，我们的这个插件生效了，

clean-webpack-plugin插件在打包之前会清除我们的dist目录
然后webpack帮助我们打包
然后htmlwebpackplugin会生成一个index.html，并把生成的js注入到html中