Webpack與Gulp、Grunt共性和區別
---恢復內容開始---
Webpack與Gulp、Grunt其實沒有什麽可比性，它可以看作模塊打包機，通過分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。
他們的工作方式也有較大區別：
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最後打包為一個（或多個）瀏覽器可識別的JavaScript文件。
同時 webpack 為了解決可以 require 不同文件的需求引入了loader, 比如面對sass文件有
-
sass-loader, 把sass 轉換成 css
-
css-loader, 讓 webpack 能識別處理 css
-
style-loader, 把識別後的 css 插入到 html style中
類似的識別es6 有babel-loader
本來這就是 webpack 的初衷，require everything, bundle everything. 一開始 webpack 剛出來的時候大家都是把它結合著 gulp 一起用的， gulp 裏面有個 gulp-webpack，就是讓 webpack 專門去做module dependency的事情, 生成一個bundle.js文件，然後再用 gulp 去做一些其他雜七雜八minify, uglify的事情。 後來人們發現 webpack 有個plugins的選項， 可以用來進一步處理經過loader 生成的bundle.js，於是有人寫了對應的插件， 所以minify/uglify, 生成hash的工作也可以轉移到webpack本身了，擠掉了gulp這部分的市場份額。 再後來大家有發現 npm/package.json 裏面的scripts 原來好好用啊，調用任務的時候就直接寫一個簡單的命令，因為 gulp 也不就是各種插件命令的組合呀，大部分情況下越來越不需要 gulp/grunt 之類的了 ref. 所以你現在看到的很多新項目都是package.json裏面scripts 寫了一堆，外部只需要一個webpack就夠了。
打個不恰當的比方，webpack就像微信一樣，本來就是做聊天(module dependency)的，後來生生搞出一個微信小程序(processing files)，大家面對簡單的需求發現這個比原生app方便使用啊，於是開發原生的人越來越少一樣。
---恢復內容結束---
Webpack與Gulp、Grunt沒有什麽可比性，它可以看作模塊打包機，通過分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。
他們的工作方式也有較大區別：
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最後打包為一個（或多個）瀏覽器可識別的JavaScript文件。
Webpack與Gulp、Grunt共性和區別