之前學習過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在打包後執行。