介紹建置工具
過去：
早期前端工程師寫網頁，僅透過前端三大元素「JavaScript、CSS、HTML」開發web應用。
現今：
近年前端發展出許多新思維，出現了「模組化」的概念、「新框架」的出現、「新語言」的誕生，讓傳統的作法不再流行，各種可以加強開發效率的新工具出現。
- 模組化：模組化是將一個複雜的系統，分解為多個模組以方便程式開發。例：ES6模組化是國際標準組織ECMA提出的JavaScript模組化標準，他在語言層面上實現模組化，成為瀏覽器和伺服器通用的模組化解決方案。
- 新框架：在web應用變的龐大時，直接操作DOM會使程式變得複雜難以維護，因此出現React、Vue、Augular前端框架。
- 新語言：ES6、TypeScript、Flow、SCSS…
然而，前端技術發展之快，卻有一個共同點：這些工具的原始碼無法直接執行，必須透過「轉換」才可以正常執行，因此，「建置工具」就誕生了。
建置工具實際任務
「建置」就是將原始程式碼，轉換成可以執行的JavaScript、CSS、HTML。
「建置」的目的最主要就是工程化、自動化。
- 程式轉換：將TypeScript編譯為JavaScript，將SCSS編譯為CSS。
- 檔案最佳化：壓縮JavaScript、CSS、HTML程式，壓縮合併圖片。
- 程式分割：分析首頁不需要執行的部分程式，讓其非同步載入。
- 模組合併：採用模組化建置的專案中的有多個模組、檔案，透過建置功能，將模組合併為一個檔案。
- 自動更新：監聽本機端程式碼的變動，自動重新建置、更新瀏覽器。
- 程式驗證：在程式被傳送到倉庫前，需要驗證程式是否符合標準，以及單元測試是否通過。
- 自動發布：更新程式後，自動建置出現上發布程式，並傳輸給發布系統。
常見的「建置工具」
Npm Script：Node.js附帶的套件管理員
Grunt：自動化執行依賴的工作
Gulp：以串流為基礎的自動化建置工
Fis3：整合各種Web開發需要的建置功能
Webpack：包裝模組化JavaScript的工具
Rollup：專注於ES6的模組包裝工具
Webpack為何物
在Webpack裡的所有檔案皆被視為模組，透過Loader轉換檔案，透過Plugin植入鉤子，最後輸出為一個由「多個模組合成的檔案」。所以一個專案中的所有檔案，包含JavaScript、CSS、SCSS、圖片、範本，在經過Webpack的處理，最後會輸出為瀏覽器可以使用的靜態資源。
webpack幫我們做的事情很簡單，就是幫我們編譯我們的Preprocess成瀏覽器看得懂的內容然後打包成一包的完成檔案然後拿去server上傳上去。
webpack 把「任何資源」都視成一個模組。圖片是模組，所以你可以 import Image from ‘./assets/banner.png’；CSS 是模組，你可以 import styles from’style.css’，只要是任何資源都可以 import 進來使用。
- 使用模組化，避免載入順序引發錯誤的訊息
- 如使用框架開發，如Vue、react，仍建議使用原框架的CLI
- 相依性高才建議使用webpack模組化，例如在開發SPA就很適用，則js都是獨立時不太建議使用。
Webpack安裝方式
請參考Mike影片有詳盡解說