gulp和webpack的區別

一、概念

gulp 構建工具我們可以通過給gulp配置不通的task（通過gulp中的gulp.task()方法配置，比如啟動server、sass/less預編譯、檔案的合併壓縮等等）來讓gulp實現不同的功能，從而構建整個前端開發流程。

webpack 打包工具我們可以把開發中的所有資源（、js檔案、css檔案等）都可以看成模組，webpack是通過loader（載入器）和plugins（外掛程式）對資源進行處理的。

gulp是對整個過程進行控制，所以在其配置檔案（gulpfile.js）中配置的每乙個task對專案中該task配置路徑下所有的資源都可以管理。

gulp.task('sass',function());

上面這個task可以對'src/styles/*.scss'目錄下的所有以.scss結尾的檔案進行預處理。

webpack則不是這樣管理資源的，它是根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源(如下圖)。通俗的說，webpack就是需要通過其配置檔案（webpack.config.js）中entry配置的乙個入口檔案（js檔案）,如下圖

entry:

//引入scss檔案
//引入依賴模組
var greeter = require('./greeter.js');

所以，webpack中對資源檔案的處理是通過入口檔案產生的依賴形成的，不會像gulp那樣，配置好路徑後，該路徑下所有規定的檔案都會受影響。