隨着前端發展如日沖天，前端項目也越來越複雜，得益於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作者接受參訪文章