主要對三種打包工具使用對比，還有一些場景的分析
一、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：當代碼變化時，它可以幫我們自動刷新頁面