一文弄懂webpack和gulp的区别

webpack

webpack是当下最热门的前端资源模块化管理和打包工具。
侧重于模块打包，我们可以把开发中的所有资源（图片、js文件、css文件）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源

核心代码：

const path = require('path'); 
var webpack = require("webpack");
const config = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name]-[hash:8].js',
        path: path.join(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.html/, use: ['html-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: __dirname + '/index.html'
        })
    ]
}
module.exports = config;

gulp

gulp强调的是前端开发的工作流，我们可以设置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程
核心代码：

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('hello', function() {
// 将你的默认的任务代码放在这
  console.log('hello world!');
});
gulp.task('sass',function(){
  return gulp.src('src/main/webapp/static/styles/scss/apply.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/main/webapp/static/styles/css'))
});

（Gulp侧重于开发整个过程的控制管理）

（Webpack更侧重于模块打包）