HtmlWebpackPlugin 插件

使用插件plugins可以让打包更便捷

plugin 可以在webpack运行到某个时刻的时候，帮你做一些事情（有点像生命周期函数，比如刚打包的某个时刻）

正常情况下，我们运行打包命令，然后在生成的dist目录下，是没有index.html文件的，我们需要手动的去添加这个文件，手动添加这么麻烦的事情，果断是不能忍的。怎么办？ 用HtmlWebpackPlugin插件

使用流程

1. 安装 npm install --save-dev html-webpack-plugin
2. 在webpack.config.js文件配置,配置如下
   
   image.png
   
   然后我们再打包的时候，就会在dist目录下，看到自动生成的index.html文件
   
   image.png

总结 ：HtmlWebpackPlugin插件会在打包结束后，自动生成一个html文件，并把打包生成的JS文件，自动引入到这个html文件中

但是，这样打包生成的html文件，还是有问题的，我们在JS文件里，把img图片是放到html文件id为root的div标签中，才会显示。

image.png

但是HtmlWebpackPlugin插件生成的html文件默认是没有div标签的

image.png

怎么办呢？ 我们可以配置 HtmlWebpackPlugin插件 ，让它支持打包后生成html文件

image.png

我们在模板里，先把div写好

image.png

这样配置之后，我们会发现，dist目录下回自动生成index.html文件，因为是以src/index.html为模板的，所以里边有id为root的div,而且插件也把打包生成的JS文件自动引入了这个html文件中

image.png