webpack和gulp的区别

1.webpack 导出图片Thu Jul 19 2018 23_43_30 GMT-0400 (北美东部夏令时间).png

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：
*入口(entry)
*输出(output)
*loader
*插件(plugins)
每个核心概念的高度概述请参考webpack官网，地址：https://www.webpackjs.com/concepts/

demo核心代码：

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;

2.gulp

1. 全局安装 gulp：
   $ npm install --global gulp
2. 作为项目的开发依赖（devDependencies）安装：
   $ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js 的文件：
   var gulp = require('gulp');

gulp.task('default', function() {
// 将你的默认的任务代码放在这
});

4. 运行 gulp：
   $ gulp

demo:

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 VS webpack:

1.Gulp侧重于前端开发的 整个过程 的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。

2.Webpack有人也称之为 模块打包机 ，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

3.另外我们知道Gulp是对整个过程进行控制，所以在其配置文件（gulpfile.js）中配置的每一个task对项目中 该task配置路径下所有的资源 都可以管理。比如，对sass文件进行预编译的task可以对其配置路径下的所有sass文件进行预编译处理：