webpack和gulp的区别
gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
1.构建工具
2.自动化
3.提高效率用
Webpack 是当下最热门的前端资源模块化管理和文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
1.打包工具
2.模块化识别
3.编译模块代码方案用
Gulp侧重于前端开发的整个过程的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程
Webpack有人也称之为模块打包机，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。
为什么使用webpack-gulp结合
webpack 主要以entry文件为入口形成的依赖链，对依赖文件的类型，进行监听，loader任务，打包合并，专业处理打包各种规范模块。gulp 主要以监听物理目录下文件，执行进行配置的任务流。
最佳实践是gulp负责工作流生命周期里面的样式,雪碧图的合并,2x/3x多倍图的输入上，webpack负责脚本模块打包合并（组件开发）。
当然，对于react或者vue等类似的组件化开发方式，webpack足矣
直至到后来在 雪碧图的合并，2x / 3x 多倍图的输出上，在 Webpack 上苦苦找寻不了比较完美的解决方案等等。
（以上这些结论是我从网上其他博客看到的，假如你现在使用vue，react，我觉得现在webpack已经足够使用了，并且vue-cli很好的支持，但是如果想写原生的，模块化和打包，那webpack+gulp确实是可以很好的选择）
应用实例
目录如下
gulpfile.js代码如下：
var gulp = require('gulp')
var sass = require('gulp-sass')
var plumber = require('gulp-plumber') // 使用gulp-plumber来捕获处理任务中的错误
var webpack = require('webpack-stream')
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var fileinclude = require('gulp-file-include')
var connect = require('gulp-connect')
var gulpOpen = require('gulp-open')
var webpackConfig = require('./webpack.config.js')
// 编译html
gulp.task('html', ['fileinclude'], () => {
return gulp.src('./src/app/*.html')
.pipe(gulp.dest('./dist/app'))
.pipe(connect.reload())
});
//用于在html文件中直接include文件
gulp.task('fileinclude', () => {
gulp.src(['src/app/**/*'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist/app'))
.pipe(connect.reload())
});
// 用于编译压缩scss文件
gulp.task('sass', ['fileinclude'], () => {
return gulp.src(['./src/css/main.scss', 'src/css/*.css'])
// 防止因为编译失败而退出
.pipe(plumber({
errorHandler: function(error) {
this.emit('end')
}
}))
// 压缩scss文件
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(concat('style.min.css'))
.pipe(gulp.dest('./dist/css/'))
.pipe(connect.reload())
});
// 使用webpack编辑es6文件转换并压缩
gulp.task('js', ['fileinclude'], () => {
return gulp.src('./src/js/*.js')
// 使用webpack配置文件，详细见下
.pipe(plumber({
errorHandler: function(error) {
this.emit('end')
}
}))
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('./dist/js'))
.pipe(connect.reload())
});
//将图片拷贝到目标目录
gulp.task('images', () => {
gulp.src(['src/images/**/*'])
.pipe(gulp.dest('dist/images'))
});
// 实时监控文件是否发生变化，若发生变化，立刻选择使用上述三个任务
gulp.task('watch', () => {
gulp.watch('./src/css/**/*.scss', ['sass']);
gulp.watch('./src/js/**/*.js', ['js']);
gulp.watch('./src/app/*.html', ['html'])
gulp.watch('./src/images/**', ['images'])
});
gulp.task('connect', function() {
connect.server({
livereload: true,
root: 'dist/',
port: 8888
})
})
gulp.task('open', () => {
gulp.src('')
.pipe(gulpOpen({
uri: 'http://localhost:8888/app'
}))
});
// 在终端中输入 gulp 就开始gulp进程
gulp.task('default', ['sass', 'js', 'html', 'watch', 'connect', 'open', 'fileinclude', 'images']);webpack.config.js代码如下:
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var path = require('path');
var webpack = require('webpack');
var fs = require('fs');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
let files = { **** } // 想要编译的多个入口文件，这里省略
module.exports = {
cache: true,
devtool: "#source-map",
entry: files,
output: {
path: path.join(__dirname, "dist/js/"),
publicPath: "dist/js/",
filename: "[name].js",
chunkFilename: "[chunkhash].js"
},
resolve: {
},
plugins: [
new CommonsChunkPlugin('common'),
new uglifyJsPlugin({
compress: {
warnings: false
}
})
]
};index.html文件代码：
<!DOCTYPE html>
<html lang="en">
@@include('header.inc')
<body>
<div class="container">
@@include('menu.html')
<div class="main" id="main">
<img src="../images/mac.jpg" alt="">
</div>
@@include('footer.inc')
</div>
<script src="../js/common.js"></script>
<script src="../js/main.js"></script>
</body>
</html>main.js文件代码
import _ from 'lodash';
function component() {
var element = document.createElement('div')
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
console.log( _.join(['Another', 'module', 'loaded!'], ' '))
var arr = ['前端', '后台', '产品', '运维', 'UI', '职能']
element.innerHTML += '我是蚂蚁，我们公司有这些部门：'
_(arr).forEach((res, index) => {
if (index < arr.length - 1) {
element.innerHTML += res + ','
} else {
element.innerHTML += res
}
})
return element
}
document.getElementById('main').appendChild(component())main.scss文件代码
@import "header";
@import "footer";
body {
background-color: #fff;
ul {
list-style: none;
}
.box{
width: 100%;
}
.container{
width: 80%;
margin:0 auto;
text-align: center;
.main {
width:100%;
text-align: center;
padding: 10px 0;
color: #666;
img {
width:100%;
}
}
}
}最终编译得到的dist文件夹目录
总结
webpack作为初级编译工具，gulp作为最终编译工具，来定位比较好解释
webpack可以很方便引用node_module包，降级es6，样式注入等
作为最初级的功能定位性价比最高webpack输入输出都以js为主，对html兼顾较少，可用组件不多很难达到可用的程度。依靠gulp丰富的组件可以很好地让js和html联动配置，控制webpack，实施高度自动化。
(适合多页面操作)