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那样，配置好路径后，该路径下全部规定的文件都会受影响。