四款前端主流的打包工具：grunt ， gulp，webpack， rollup，以發布時間為順序。
Grunt：
最老牌的打包工具，它運用配置的思想來寫打包腳本，一切皆配置，所以會出現比較多的配置項，諸如option,src,dest等等。而且不同的插件可能會有自己擴展字段，認知成本高，運用的時候需要明白各種插件的配置規則。
Gulp：
用代碼方式來寫打包腳本，並且代碼采用流式的寫法，只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch 接口，運用相當簡單。更易於學習和使用，使用gulp的代碼量能比grunt少一半左右。
webpack:
是模塊化管理工具和打包工具。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 Commonjs 模塊、AMD 模塊、ES6 模塊、css、圖片等。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。它定位是模塊打包器，而 Gulp/Grunt 屬於構建工具。Webpack 可以代替 Gulp/Grunt 的一些功能，但不是一個職能的工具，可以配合使用。
Rollup：
下一代 ES6 模塊化工具，最大的亮點是利用 ES6 模塊設計，利用 tree-shaking生成更簡潔、更簡單的代碼。一般而言，對於應用使用 Webpack，對於類庫使用 Rollup；需要代碼拆分(Code Splitting)，或者很多靜態資源需要處理，再或者構建的項目需要引入很多 Commonjs 模塊的依賴時，使用 webpack。代碼庫是基於 ES6 模塊，而且希望代碼能夠被其他人直接使用，使用 Rollup。
vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
使用總結：
Grunt：MPA，老牌打包工具，基於文件為媒介（運行慢，零散的腳本文件一當多起來就受到影響
Gulp：MPA，易學，基於 nodejs 的 steam 流打包
Webpack：SPA，目前最強大的打包工具，但是過於臃腫，如何單純打包js不推薦
Roleup：MPA，tree-shaking特性（針對es6，按需打包，多余的不要，目前（2018，vuex,react主流使用）