之前專案打包後，都是通過手動拷貝的index.html檔案來引入打包之後的js檔案執行的，
假設我一開始沒有dist目錄，進行webpack對專案進行打包，打包完成之後，你會發現dist目錄下沒有index.html檔案，需要手動的往裡面增加index.html。以後每次打包都這樣做的話是很麻煩的。
我們如何解決這個問題呢？接下來講解乙個webpack外掛程式，html-webpack-plugin就能夠幫助我們解決這個問題
首先安裝html-webpack-plugin
cnpm installl html-webpack-plugin -d安裝並配置完成之後，進行打包
有的小夥伴打包會報錯，這是由於htmlwebpackplugin4的版本和webpack5不相容導致的，）
安裝指定版本的 html-webpack-plugin外掛程式
cnpm install [email protected]
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做一些事情
我們修改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中
webpack之旅 深入理解Plugin
上次我們深入介紹了loader的相關的內容，今天我將帶大家深入看看plugin外掛程式的內容 在檔案中建立乙個js類 class class compiler 注 這裡我們使用了乙個tap 方法，他表示的是使用的是同步執行的鉤子，而我們需要在plugin中執行非同步的操作時，可以使用的就是tapas...
Webpack5 常用Plugin（外掛程式）
webpack的外掛程式，可以增強webpack的自動化能力，使用外掛程式，可以完成自動清空目錄 拷貝資源檔案 壓縮輸出 等功能。webpack的乙個個外掛程式，就是在 webpack生命週期的鉤子上掛載的乙個個任務。常用的webpack外掛程式 作用clean webpack plugin 在每次...
深入淺出webpack學習 6 Plugin
plugin用於擴充套件webpack功能，各種各樣的plugin幾乎讓webpack可以 做任何構建相關的事情。配置plugin plugin的配置很簡單，plugins配置項接受乙個陣列，陣列裡每一項都是乙個要使用的plugin的例項，plugin需要的引數通過建構函式傳入。const comm...