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(){
        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那樣，配置好路徑后，該路徑下所有規定的文件都會受影響。