主要对三种打包工具使用对比，还有一些场景的分析
一、webpack
webpack是资源模块打包工具，根据我们的资源依赖树，分不同类型打包成静态资源，支持热更新，代码模块切分，three-shaking、异步加载等、
特性：
不同资源的模块打包 热更新 代码分割 静态资源压缩 异步加载 three-shaking
适用场景
应用程序打包
二、rollup
Rollup 是一个模块打包工具, 可以将我们按照 ESM (ES2015 Module) 规范编写的源码构建输出如下格式:
- IIFE: 自执行函数, 可通过 <script> 标签加载
- AMD: 通过 RequireJS 加载
- CommonJS: Node 默认的模块规范, 可通过 Webpack 加载
- UMD: 兼容 IIFE, AMD, CJS 三种模块规范
- ESM: ES2015 Module 规范, 可用 Webpack, Rollup 加载-
特性：
支持动态导入。
支持tree shaking。仅加载模块里用得到的函数以减小文件大小。
Scope Hoisting。 rollup可以将所有小文件生成到一个大文件中，所有代码都在同一个函数作用域里:， 不会像 Webpack 那样用很多函数来包装模块。
没有其他冗余代码, 执行很快。除了必要的 cjs, umd 头外，bundle 代码基本和源码差不多，也没有奇怪的 webpack_require, Object.defineProperty 之类的东西,
缺点：
不支持热更新功能；对于commonjs模块，需要额外的插件将其转化为es2015供rollup 处理；无法进行公共代码拆分。 运行时态的动态导入 dynamic imports at runtime.
rollup 通过插件来编译处理各类静态资源：
- rollup-plugin-typescript2
- rollup-plugin-babel
- rollup-plugin-uglify
- rollup-plugin-commonjs
- rollup-plugin-postcss
- rollup-plugin-img
- rollup-plugin-json
适用场景：
由纯js开发的第三方库； 需要生成单一的umd文件的场景
三、gulp
自动化构建工具，把项目工作抽象成自动化任务 用gulp构建自动化工作流，处理项目中的资源，基于流式操作。
特性 gulp文档简单，学习成本低，使用简单；对大量源文件可以进行流式处理，借助插件，可以对文件类型进行多种操作处理。
适用场景 静态资源密集操作型场景，主要用于css、图片等静态资源的处理操作。 文件处理：
gulp通过各种中间件处理静态资源的编译：
- gulp-load-plugins：自动加载 package.json 中的 gulp 插件
- gulp-rename： 重命名
- gulp-uglify：文件压缩
- gulp-concat：文件合并
- gulp-less：编译 less
- gulp-sass：编译 sass
- gulp-clean-css：压缩 CSS 文件
- gulp-htmlmin：压缩 HTML 文件
- gulp-babel: 使用 babel 编译 JS 文件
- gulp-jshint：jshint 检查
- gulp-imagemin：压缩jpg、png、gif等图片
- gulp-livereload：当代码变化时，它可以帮我们自动刷新页面