一、前言

先前有寫過兩篇關於 Webpack 的文章(文章1、文章2)，回顧起自己學習到 Webpack 是在培訓營課程尾聲時期，那時候還懞懞懂懂的，只知道很基本的用法，但不清楚實際深入運作原理，所以寫了前述兩篇。

但大家有想過為何會有像是 Webpack 之類的打包工具誕生嗎？他的存在有什麼必要性呢？

二、打包工具的緣起

1. 前端工程化

自從 Node.js 發行後，套件管理工具 npm 誕生，即是工程化的起點。npm 提供了 script 的功能，可以將 shell script 封裝起來供其他開發者使用。

1
2
3
4
5
6
{
    "script":{
        "dev": "node app.js",
        "mock": "node index.js"
    }
}

以上面這段程式碼來解說，當開發者輸入npm run dev，就會執行node app.js這行指令；相對地當開發者輸入npm run mock，就會執行node index.js這行指令。這樣簡短的 script 設定，可以解決一些基本需求。

但後續開發過程，大部分重複繁雜的步驟，就需要工具為我們帶來工程化的方式，加速開發的流程。

2. 打包工具的選擇

除了較常聽見的 Webpack，其實還有以下幾種打包工具可供選擇：

項次 名稱 備註
1 Grunt 比 Webpack 早發行，針對每個插件需分別設定。
2 Backpack 專注在 Node.js 後端專案
3 Parcel 好上手、無須設定便能直接使用。

三、打包工具的用途

1. 轉譯

在使用前端框架編寫程式時，因為一般的瀏覽器只能聽解讀基礎的 HTML、CSS、JavaScript，中間必須經過轉換的步驟，就稱為轉譯。

開發者撰寫出的程式碼，會透過打包工具力呼叫 Bable 套件，逐步將之轉譯成瀏覽器能解讀的內容，

2. 優化程式

開發者可隨著程式碼開發需求，設定相對應的 Webpack 插件(如：minify、uglify、chunk等)，就能套用各個插件帶來的優化功能至應用程式上。

3. 加速開發

打包工具的套件真的很多樣且實用，以下簡列幾種舉例：

項次 套件名稱 用途
1 Webpack Spritesmith 可完成圖檔合併
2 Webpack 內建的 Hot Reload 可偵測並僅更新新修改到的內容

四、結論與自我鼓勵

今日文章其實只是稍微提到打包工具之緣起與主要用途，文章內容是自己於下班時間研究書籍與網路資源整理出來，若有錯誤或不詳盡之處，再請各位前輩指導。

如果想知道的更深入，推薦可以看「從0到Webpack」的「寫在 Webpack 之前」這個章節，其他前端更深入常聽到的專有名詞也可以看「前端三十」這本，相信會獲益不少！