webpack打包html文件原理,复习webpack4之使用plugins便捷打包

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1. plugins作用

plugins可以在webpack运行到某个时刻的时候，自动帮我们做一些事情。(有点类似vue和react的生命周期函数)

2. 自动生成HTML文件

我们每次打包时，想自动生成HTML文件，需要使用html-webpack-plugins这个插件。

使用方法，在webpack.config.js中先引入插件，然后在plugins中实例化插件。

这样每次打包结束之后，会自动生成一个html文件，并把打包生成的js自动引入到这个html文件中，有hash值变化也会自动更新。

如果我们想在每次生成的html中加入一些内容，可以这样配置。先新建一个html模板。

然后在wepack.config.js中增加以下代码：

这样webpack在打包的时候会以src目录下的index.html为模板，并把内容注入到生成的html文件中。

下面为自动生成的html文件。

3. 重新打包时删除dist

我们每次打包时，想让webpack自动清理dist目录，删除没有用的文件，就需要使用clean-webpack-plugins这个插件。

使用方法，在webpack.config.js中先引入插件，然后在plugins中实例化插件。

这样每次打包之前，webpack会使用clean-webpack-plugins这个插件删除dist目录下的所有内容。

注意：clean-webpack-plugins在打包之前执行，html-webpack-plugins在打包后执行。