在今時今日，webpack 已經成為前端開發非常重要的工具之一。本質上它是一個 Javascript 模組封裝工具，但透過 loaders 和 plugins 它也可以轉換封裝其他前端的資源檔像是 HTML，CSS，甚至是圖片等，讓我們能夠控制程式發出 HTTP 請求的數量（編譯結果的檔案數量）。我們可以使用偏好的方式去撰寫這些資源檔像是 Jade, Sass, ES6 等等。同時也讓我們能夠輕易的使用來自 npm 的套件。
這篇文章目標讀者是那些剛接觸 webpack 的新手。內容將會包含設定，模組的使用，loaders，plugins，code splitting（分拆程式碼），熱替換（Hot module replacement）。
每過一陣子，重新學習 webpack 就會有些新的發現 - 廢話。
前端的世界變化之快速，從 2010 開始小弟經歷了 jQuery, Backbone, Angular, 到 React。這一路走來雖然學習到了許多高明開發者融合於框架或函式庫中的智慧，卻也因為不斷快速變化感到疲憊。時至 2016 小弟認為在實務與理想之間取得一個完美平衡的前端框架大概就屬 vue.js 了。
當然這前端世界裡並沒有萬能藥可以完美的處理所有問題，不過 vue.js 的精美，不只容易與傳統 MVC 框架(Rails, ASP.NET MVC)等結合，當要使用最新的設計模式如 Flux, redux 等也都是沒問題的，再加上易學與一些你肯定能感受到作者從實戰淬煉出來的特性。因此在 2016 我也決定轉戰 vue.js。
本文將對 webpack 周邊的 middleware 與 plugin 套件等作些介紹，若您對於 webpack 還不了解可以參考這篇彙整的翻譯
今時今日所謂的網站正進化成網路應用程式，它不再只是單純的顯示圖片文字資訊，而包含著更多互動與操作行為，同時也意味著一個網站: