Webpack和 Gulp的打包工程的区别

最近在项目中遇到Webpack 和 Gulp混合使用的项目，一时没有看懂配置文件，这里先整理一下两者的区别。
Webpack基于模块化的思想，也有个名字叫前端模块化打包工具，Gulp是任务运行时程序，简单来说任务运行程序是一个允许自动执行可重复活动的应用程序。两者都可以用来打包。
Webpack基于一切皆模块，按需加载的核心思想，可以将 js ，css 等文件看作一个“模块（module）”，你可以通过require(‘myJSfile.js’)或者require(‘myCSSfile.css’)加载需要的模块。
Gulp可以进行js，html，css，img的压缩打包，可以将多个js文件或是css压缩成一个文件，并且可以压缩为一行，以此来减少文件体积，加快请求速度和减少请求次数；并且gulp有task定义处理事务，从而构建整体流程，自动执行task定义的事务。
看到这，似乎更懵逼了，两者用来打包，结果来看似乎没什么区别，都能把多个js文件打包成一个文件。我们结合一下代码就明白了。先看一个js文件的打包

Gulp:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){   
    gulp.src('js/*.js')       // js下所有文件
    .pipe(concat('all.js'))   //合并成的js文件名称
    .pipe(uglify())            //压缩
    .pipe(gulp.dest('build'));    //打包压缩在build目录下。
});

Webpack:

//__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录 
      module.exports = {             //注意这里是exports不是export 
      entry: __dirname + "/src/main.js",     //唯一入口文件 
      output: {                          //输出目录 
             path: __dirname + '/build',  //打包后的js文件存放的地方 
             filename: 'bundle.js'    //打包后输出的js的文件名 
      },
};

看到这里应该发现了区别，Gulp 打包，需要提供所有需要打包的js文件的路径，而webpack只需要一个js，但这并不是说只打包了这一个，而是这一个文件中引用了其他所有文件，他会根据这种依赖关系而自动加载这些文件进行打包，这就是所说的按需加载和模块化。
当然这并不是说webpack就一定比Gulp好，因为他模块化，你需要确保主文件与所有文件建立依赖关系，否则你就需要多写几个，因此可以特意写一个文件，在其中引入其他所需要打包的资源。Gulp就能指定文件夹下全部打包。因此一般都是根据需要混合使用的，先用webpack打包成各个模块，再用Gulp打包成一个js或css文件。

Gulp除了上述功能外，还有更重要的一个功能，按task构建的事务处理流程，上述代码就构建了一个default的任务，它的任务就是打包js下所有文件。它能只执行一个任务，也能执行多个或全部任务，这些任务都是可配置化的。