什麼是前端工程化？

前端工程化是依據業務特點，將前端開發的規範、流程、技術、工具、經驗形成規範，並且成立一種標準體系。

為什麼要前端工程化？

我們需要通過規範的流程，自動化的工具來提升開發效率、效能、質量、多人協作能力以及開發體驗。

前端現在發展這麼快，面臨著流程，資源組織和協同開發的種種挑戰，團隊要成長，建立工程化是必經之路。

but，針對不同公司和不同的專案，找到最合適的工程化方案才是最重要的，什麼規範，流程，技術，可以先放一下。

有什麼構建工具？

構建工具是幹嘛的？

主要是實現自動化的處理，例如程式碼檢查，預編譯，合併，壓縮，生成雪碧圖，sourceMap，版本管理，單元測試，以及監控。

構建工具三劍客

• Grunt
• Gulp
• Webpack

Grunt，Gulp基於任務執行

由上圖可知，它們打包的策略通常是 All in one，最後頁面還是引用 css、img、js，可以這麼說，只是幫我們把同一型別的檔案整合到了一起，壓縮了程式碼。然而，還是手擼無疑。

Grunt優點

配置驅動，簡單直接

Grunt缺點

當任務非常多的時候，利用配置來完成所有事情，太難了！

它的IO操作，每一次任務都要從磁碟讀取檔案，處理完之後，再寫入磁碟，當原始檔較多的時候，任務很複雜，效能就堪憂了。如果我想操作less， 讀取less---編譯成css---儲存到磁碟---讀取css---css壓縮處理---儲存到磁碟

Gulp優點

程式碼驅動，寫任務和nodejs程式碼一樣

再者，對檔案的讀取是流式操作，一次IO可以處理多個任務gulp處理less的操作是 讀取less---編譯成css---壓縮處理---儲存到磁碟

它們側重對整個過程的控制管理，實現簡單、對架構無要求、不改變開發模式，所以非常適合前端、小型、需要快速啟動的專案。

Browserify、Webpack、rollup.js 基於模組化打包

主要介紹一下webpack

webpack特點

• 把一切都看作模組，html，js，css，image都可以互相引用，通過定義入口檔案 entry.js 對所有依賴進行跟蹤，各模組通過loader，plugins處理，最後打包到一起。
• 按需載入 webapck會將檔案分為多個程式碼塊（chunks），還能將重複部分提取出來作為commonChunk，實現按需加在。

webpack缺點

• 上手優點蛋疼
• 構建多頁面應用配置比較麻煩，而且不好打到按需加在。

適用場景：

綜上所述，Webpack 特別適合配合 React.js、Vue.js 構建單頁面應用以及需要多人合作的大型專案，在規範流程都已約定好的情況下往往能極大的提升開發效率與開發體驗。