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無異。