Webpack-前端建置工具的發展背景及入門介紹

Webpack是當下流行的「前端建置工具」之一。

首先了解建置工具

建置工具出現的來龍去脈？

過去：
早期前端工程師寫網頁，僅透過前端三大元素「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的模組包裝工具

時空背景：

• 在Npm Script和Grunt時代，Web開發要做的事情變多、流程變複雜，自動化的思維興起，用於簡化流程。
• 在Gulp時代，新語言出現，流式處理思想出現是為了簡化檔案轉換的流程。
• 在Webpack的時代，由於單頁應用的流行，網頁的功能和實現程式變得複雜、龐大，因此Web開發相模組化改進。

  Webpack究竟是什麼?

  專注於建構模組化的專案

  在Webpack裡的所有檔案皆被視為模組，透過Loader轉換檔案，透過Plugin植入鉤子，最後輸出為一個由「多個模組合成的檔案」。
  
  所以一個專案中的所有檔案，包含JavaScript、CSS、SCSS、圖片、範本，在經過Webpack的處理，最後會輸出為瀏覽器可以使用的靜態資源。

使用方法如下：

module.expert={
    //所有模組的入口，Webpack從入口開始遞迴解析出所有依賴的模組
    entry: './app/js',
    output:{
        //將入口所依賴的所有模組包裝成一個檔案bundle.js輸出
        filename: 'bundle.js'
    }
}

參考資料來源

• JS高手昇華之路Webpack是唯一的路徑-吳浩麟 著