前端工程化--構建工具

什麼是前端工程化？

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

爲何要前端工程化？

咱們須要經過規範的流程，自動化的工具來提高開發效率、性能、質量、多人協做能力以及開發體驗。

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

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 構建單頁面應用以及須要多人合做的大型項目，在規範流程都已約定好的狀況下每每能極大的提高開發效率與開發體驗。