一、前言

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

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

二、打包工具的緣起

1. 前端工程化

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

{
    "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. 轉譯

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

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

2. 優化程式

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

3. 加速開發

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

四、結論與自我鼓勵

• 參考書籍：從0到Webpack
• 參考書籍：前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法

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

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

本文同步發佈於我的個人網站 Annie Code Life