前端三十｜21. [FE] 用過 Webpack 之類的打包工具嗎？為什麼需要？
隨著網頁技術不斷翻新，前端需要處理的事也就越來越繁雜；在 2016 年有一篇當時很紅的文章，詼諧的故事除了是技術名詞科普之外，同時也諷刺了前端技術的瘋狂增長，蠻推薦沒看過的讀者看一下的。在這樣龐雜豐富且迅速更迭的技術環境之下，將開發流程自動化、工程化就成了必需，開發者也自然會需要一些工具來協助優化這些流程。今天就讓我們一起聊聊前端的打包工具。
筆者撰文的時候，將該文章重看一次，發現比三年前第一次看的時候多理解不少，雖然還不到 100% 清楚，但總歸算得上是有成長吧 XD
本系列文已經重新編校彙整編輯成冊，並正式出版囉！
《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！
喜歡我文章內容的讀者們，歡迎您前往購買支持！
前端工程化
工程化的起點，自然是從 Node.js 問世，套件管理工具 npm 誕生開始。透過 npm ，開發者便能快速且輕易的從 NPM Registry 下載到其他開發者提交的套件，並加在自己的專案中；除此之外，npm 也提供了 script 的功能，將 shell script 封裝成別名快速使用：
{
"scripts":{
"dev": "node app.js"
}
}例如上例，當開發者輸入 npm run dev，就等同於執行了 node app.js 這行指令；透過這樣簡短的 script 設定，也確實可以解決一些基本的需求。
Grunt
但其實大部分需求在開發過程中，重複性是非常高的。例如將 SASS、SCSS 編譯成 CSS，透過 npm script，就需要修改完、輸入指令進行編譯、Reload，開發者的開發體驗便會大打折扣；要解決這樣的情況，Grunt 是一個不錯的解決方案。
Grunt 提供了更大的程式化空間，讓開發者能更自由的控制自動化流程；藉由大量的插件（plugin），以及高度客製化的設定，開發者可以輕易的完成一些常見的任務。
例如 昨天 提到的 Uglify，就可以透過 grunt-contrib-uglify 這個套件，幫我們自動完成這樣繁瑣的步驟。
