gulp和webpack的區別

1、概念

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(){
        gulp.src('src/styles/*.scss')
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('./build/prd/styles/'));//編譯後的輸出路徑
    });

上面這個task能夠對'src/styles/*.scss'目錄下的全部以.scss結尾的文件進行預處理。

Webpack則不是這樣管理資源的，它是根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源(以下圖)。通俗的說，Webpack就是須要經過其配置文件（webpack.config.js）中entry配置的一個入口文件（JS文件）,以下圖

entry: {
      app:__dirname + "/src/scripts/app.js",
}

//引入scss文件
   import '../style/app.scss';
    
   //引入依賴模塊
   var greeter = require('./Greeter.js');
   document.getElementById('root').appendChild(greeter());

　　解析過程當中，發現一個app.scss文件，而後根據webpack.config.js配置文件中的module.loaders屬性去查找處理.scss文件的loader進行處理，處理app.scss文件過程當中，若是發現該文件還有其餘依賴文件，則繼續處理app.scss文件的依賴文件，直至處理完成該「鏈路」上的依賴文件，而後又遇到一個Greeter.js模塊，因而像以前同樣繼續去查找對應的loader去處理...

因此，Webpack中對資源文件的處理是經過入口文件產生的依賴造成的，不會像Gulp那樣，配置好路徑後，該路徑下全部規定的文件都會受影響。