webpack的作用是?
webpack管理的架構
在專案檔裡面，有很多類型的檔案，像是.png, .jpg, .css, .scss, .vue, .js 等等之類的檔案類型，
我們就可以靠webpack來統一管理它們。
在webpack管理的專案檔裡面都會有一個檔案作為你的進入點，這個進入點檔案就是tree的root。接著，我們就在這個進入點檔案，透過import或require來引入我們需要的檔案。最後，我們執行webpack的編譯指令，webpack就會依循你在注入點檔案中引入的檔案，去對它們做編譯。
HMR (Hot Module Replacement)
webpack這個功能，可以讓你在修改完專案檔的內容時，同時注入到你的網頁中，即時的看出你修改的內容是不是你要的效果。
那webpack中有一個套件叫做webpack-dev-server 就可以實現這樣的環境。
讓我們不用每次修改完，還要自己輸入指令重新編譯專案檔後，在自己到瀏覽器開啟專案檔的html檔案，看修改的內容是不是有達成我們要的效果。
Loader
在前面我們有講到webpack可以編譯像是css和scss這類型的檔案，就是透過像是style-loader, css-loader這些套件，來讓webpack可以編譯各式各樣不同類型的檔案。
plugin
在本文章中的專案，有使用到html-webpack-plugin這個plugin，來對現有的index.html連動產生相對應的html檔案到dist資料夾中。
而在dist這個webpack自動產生的html檔案，我們不需要自己手動寫需要引入那些js檔案喔，因為，webpack就已經會幫我們做得好好的了~~
參考文章