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