1.2.2　Vue.js、前端工程化和Webpack

前端工程化這個詞相信讀者并不陌生，在早期的Web應用中，前端開發頂多是寫寫HTML代碼，實現頁面的布局，最后交給后端工程師，甚至有些業務都是由后端工程師一肩挑，但隨著業務和復雜性、技術的發展，前端已經不是簡單地寫頁面和樣式了，而是包括一系列可以流程化和規范化的能力，稱作前端工程化，這主要包括以下幾個部分：

·　靜態資源和動態資源的處理。

·　代碼的預編譯。

·　前端的單元測試和自動化測試。

·　開發調試工具。

·　前端項目的部署。

隨著前端工程化的不斷流行，僅僅靠手工來完成這些操作顯得效率很低，前端迫切需要一款支持上面幾個部分功能的工具，隨后便出現了諸如Webpack或Browserify (5)模塊的打包工具。越來越多的前端框架需要結合模塊打包工具一起使用，Vue.js也不例外，目前和Vue.js結合使用最多的模塊打包工具非Webpack莫屬。

Webpack的主要功能是將前端工程所需要的靜態資源文件（例如CSS、JavaScript、圖片等）打包成一個或者若干個JavaScript文件或CSS文件，如圖1-2所示。同時提供了模塊化方案來解決Vue組件之間的導入問題。本書后續的第8章會用到它，但是由于篇幅有限，本書并不會對Webpack進行詳細的講解，讀者如果想了解更多有關Webpack的內容，可以到官網上去查閱，網址為https://webpack.js.org/。

圖1-2　Webpack