Webpack與Grunt、Gulp的區別？

隨着前端發展如日沖天，前端項目也愈來愈複雜，得益於Nodejs的發展，前端模塊化、組件化、工程化也大勢所趨。這些年Grunt、Gulp到Webpack隨着工程化的發展都大行其道。

前端工程化的早期，主要是解決重複任務的問題。Grunt、Gulp就是其中表明。好比: 壓縮、編譯less、sass、地址添加hash、替換等。

Grunt官網中就說：

對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，完成大部分無聊的工做。

而現在的Webpack更像一套前端工程化解決方案。利用強大插件機制，解決前端靜態資源依賴管理的問題。

Webpack做者Tobias回覆與 Grunt Gulp NPM腳本的比較

Tobias： NPM腳本對我而言足矣。實際上，說webpack是Grunt/Gulp的替代器並不徹底準確。Grunt和Gulp以及NPM腳本都是任務執行程序。
Webpack是_模塊打包程序_。這兩類程序的目標不同。但webpack簡化了必須「過分使用」Grunt和Gulp和NPM腳本才能實現的Web開發任務也是事實。NPM腳本纔是Grunt和Gulp的替代品。
不過，除了純粹的構建以外，任務運行程序也有存在的理由，好比部署、代碼檢查、版本管理，等等。

Webpack與Grunt、Gulp運行機制

# grunt gulp 思路
【遍歷源文件】->【匹配規則】->【打包】
作不到按需加載，對打包的資源，是否用到，打包過程不關心。

# webpack
【入口】->【模塊依賴加載】->【依賴分析】->【打包】
在加載、分析、打包的過程當中，能夠針對性的作一些解決方案。好比：code split(拆分公共代碼)

Grunt與Gulp性能比較

Grunt: 每一個任務處理完成後存放在本地磁盤.tmp目錄中，有本地磁盤的I/O操做，會致使打包速度比較慢。
Gulp: gulp與grunt都是按任務執行，gulp有一個文件流的概念。每一步構建的結果並不會存在本地磁盤，而是保存在內存中，下一個步驟是可使用上一個步驟的內存，大大增長了打包的速度。

參考：
grunt官網
webpack做者接受參訪文章