webpack、gulp、rollup 使用对比和适用场景

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：当代码变化时，它可以帮我们自动刷新页面