1. webpack
官網：http://webpack.github.io/docs/
中文文檔：http://www.css88.com/doc/webpack2/
Webpack 是一個模塊打包工具。它將一堆文件中的每個文件都作為一個模塊，找出他們的依賴關系，將它們打包為可部署的靜態資源。
2. Grunt/gulp
a) 構建工具是什么，有什么用
知乎回答https://www.zhihu.com/question/35595198
自動化構建工具，就是用來代替手工執行機械重復的事情，解放我們的雙手的。
例如，項目使用 CoffeeScript/ES6代替Javascript，但瀏覽器對這些語言是不支持或者支持得不完整的，要讓它在瀏覽器里運行起來就要執行以下操作：
（1）執行編譯命令：xx.coffee->xx.js
（2）執行壓縮丑化命令：xx.js->xx.min.js
如果文件代碼被修改，那么上面兩條命令就要再執行一遍。同樣的，也會有用Less寫CSS，用Jade寫HTML，用webpack/Browserify模塊化、為非覆蓋式部署的資源加MD5戳等等。自動化構建工具就是用來幫助我們完成這些重復而機械的工作的。
b) gulp VS grunt
gulp VS grunt知乎專欄https://zhuanlan.zhihu.com/p/20309820
3. webpack與grunt/gulp
a) 不同職能的工具，可以配合使用
官方對webpack的定位是模塊打包器，而gulp/grunt屬於構建工具。雖然webpack可以代替gulp的一些功能，但是很明顯webpack和gulp/grunt不是一個職能的工具。webpack官方中給出了webpack with gulp/grunt的說明，兩者可以配合共同服務於一個項目的。
b) 構建gulp/grunt與webpack相配合的前端工作流
gulp與webpack的迷思https://segmentfault.com/a/1190000004249679
要構建這樣一個工作流,首先要理清幾個問題
（1）什么工作應該交給gulp，什么工作應該交給webpack
（2）webpack貌似支持增量更新，gulp是否支持增量更新
（3）如何實現live reload
具體配置方法參考官網
Webpack與grunt官網http://webpack.github.io/docs/usage-with-grunt.html
Webpack與gulp官網http://webpack.github.io/docs/usage-with-gulp.html