webpack与gulp的区别

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作

1.构建工具

2.自动化

3.提高效率用

 

webpack是文件打包工具，可以把项目的各种js、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案

1.打包工具

2.模块化识别

3.编译模块代码方案用

 

所以定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！

 

 

 

Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。

 

只用webpack处理js文件的合并压缩。其他任务交给gulp。

文件加md5, 实现发布更新

发版本的时候为了避免浏览器读取了旧的缓存文件，需要为其添加md5戳。

这里采用了gulp-md5-plus

gulp.task('md5:js', function (done) {
    gulp.src('dist/js/*.js')
        .pipe(md5(10, 'dist/app/*.html'))
        .pipe(gulp.dest('dist/js'))
        .on('end', done);
});

该代码会将dist/js下面所有的js计算md5戳，并将dist/app/下的html中script中的src引用文件名替换为加了md5的文件名，再将md5文件替换到目标目录dist/js。css的md5操作跟js无异。