Webpack vs Rollup

本文由做者餘伯賢受權網易雲社區發佈。

2017年4月份的時候，Facebook將React的構建工具換成了Rollup。不少人就有疑問了，Webpack不也是Facebook團隊開發的嗎，爲何不使用它而是要換成第三方構建工具呢？先別急，等你看完這篇文章，你就知道爲何了。

1、Webpack

誕生於2012年，目前Javascript社區使用得比較多的構建工具。它的出現，解決了當時的構建工具不能處理的問題——構建複雜的單頁面應用(SPA)。它是一個強力的模塊打包器。 所謂包(bundle)就是一個 JavaScript 文件，它把一堆資源(assets)合併在一塊兒，以便它們能夠在同一個文件請求中發回給客戶端。 包中能夠包含 JavaScript、CSS 樣式、HTML 以及不少其它類型的文件。

Webpack的特色

代碼分割

Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴做爲分割點，造成一個新的塊。在優化了依賴樹後，每個異步區塊都做爲一個文件被打包。

Loader(加載器)

Webpack 自己只能處理原生的 JavaScript 模塊，可是 loader 轉換器能夠將各類類型的資源轉換成 JavaScript 模塊。這樣，任何資源均可以成爲 Webpack 能夠處理的模塊。

智能解析

Webpack 有一個智能解析器，幾乎能夠處理任何第三方庫，不管它們的模塊形式是 CommonJS、 AMD 仍是普通的 JS 文件。甚至在加載依賴的時候，容許使用動態表達式 require("./templates/" + name + ".jade")。

插件系統

Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基於這個插件系統運行的，還能夠開發和使用開源的 Webpack 插件，來知足各式各樣的需求。

開始使用

安裝

目前webpack最新版本是3.0.0

npm i webpack -g  
npm i webpack@version -g

配置

在項目添加webpack.config.js

const path = require('path');
const webpack = require('webpack');
module.exports = {      entry: './src/main.js',      output: {        path: path.resolve(__dirname, './dist'),        publicPath: '/dist/',        filename: 'build.js'
      },      module: {        rules: [
          {            test: /\.vue$/,            loader: 'vue-loader',            options: {                  loaders: {}                  // other vue-loader options go here
            }
          },
          {            test: /\.js$/,            loader: 'babel-loader',            exclude: /node_modules/
          },
          {            test: /\.(png|jpg|gif|svg)$/,            loader: 'file-loader',            options: {              name: '[name].[ext]?[hash]'
            }
          }
        ]
      },      resolve: {        alias: {              'vue$': 'vue/dist/vue.common.js'
        }
      },      devServer: {        historyApiFallback: true,        noInfo: true
      },      performance: {        hints: false
      },      devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';

    module.exports.plugins = (module.exports.plugins || []).concat([        new webpack.DefinePlugin({            'process.env': {                NODE_ENV: '"production"'
            }
        }),        new webpack.optimize.UglifyJsPlugin({            sourceMap: true,            compress: {                warnings: false
            }
        }),        new webpack.LoaderOptionsPlugin({            minimize: true
        })
    ]);
}

打開命令控制檯，執行：

webpack# or webpack --config webpack.config.js

此時你應該能夠在項目目錄的dist文件夾裏找到打包好的文件了。

其餘使用方式可參照官方文檔:
英文：https://webpack.js.org/configuration/
中文：https://doc.webpack-china.org/configuration/

2、Rollup

Rollup是下一代JavaScript模塊打包工具。開發者能夠在你的應用或庫中使用ES2015模塊，而後高效地將它們打包成一個單一文件用於瀏覽器和Node.js使用。 Rollup最使人激動的地方，就是能讓打包文件體積很小。這麼說很難理解，更詳細的解釋：相比其餘JavaScript打包工具，Rollup總能打出更小，更快的包。由於Rollup基於ES2015模塊，比Webpack和Browserify使用的CommonJS模塊機制更高效。這也讓Rollup從模塊中刪除無用的代碼，即tree-shaking變得更容易。

Rollup的特色

Tree-shaking

這個特色，是Rollup最初推出時的一大特色。Rollup經過對代碼的靜態分析，分析出冗餘代碼，在最終的打包文件中將這些冗餘代碼刪除掉，進一步縮小代碼體積。這是目前大部分構建工具所不具有的特色(Webpack 2.0+已經支持了，可是我本人以爲沒有Rollup作得乾淨)。

ES2015模塊打包支持

這個也是其餘構建工具所不具有的。Rollup直接不須要經過babel將import轉化成Commonjs的require方式，極大地利用ES2015模塊的優點。

使用

先在全局安裝好rollup

npm i rollup -g

而後咱們再建立一個簡單的項目：

mkdir -p my-rollup-project/src
cd my-rollup-project

編寫好入口文件：

// src/main.jsimport foo from './foo.js';export default function () {
      console.log(foo);
}

而後，建立一個名爲foo.js的文件

// src/foo.jsexport default 'hello world!';

最後，打開命令行，執行下面的命令吧：

rollup src/main.js --format cjs

打包結果：

'use strict';var foo = 'hello world!';var main = function () {      console.log(foo);
};module.exports = main;

你也能夠打包出一個名爲bundle.js的文件：

rollup src/main.js --format cjs --output bundle.js# or `rollup main.js -f cjs -o bundle.js`

其餘使用方式可查看官網文檔：
https://rollupjs.org

3、Webpack與Rollup的對比

其實，經過分別對Webpack和Rollup的介紹，不難看出，Webpack和Rollup在不一樣場景下，都能發揮自身優點做用。Webpack對於代碼分割和靜態資源導入有着「先天優點」，而且支持熱模塊替換(HMR)，而Rollup並不支持，因此當項目須要用到以上，則能夠考慮選擇Webpack。可是，Rollup對於代碼的Tree-shaking和ES6模塊有着算法優點上的支持，若你項目只須要打包出一個簡單的bundle包，並是基於ES6模塊開發的，能夠考慮使用Rollup。
其實Webpack從2.0開始支持Tree-shaking，並在使用babel-loader的狀況下支持了es6 module的打包了，實際上，Rollup已經在漸漸地失去了當初的優點了。可是它並無被拋棄，反而因其簡單的API、使用方式被許多庫開發者青睞，如React、Vue等，都是使用Rollup做爲構建工具的。而Webpack目前在中大型項目中使用得很是普遍。
最後，用一句話歸納就是：在開發應用時使用 Webpack，開發庫時使用 Rollup。

4、總結

Webpack和Rollup做爲構建工具，都有着各自的優點和各自的使用場景，咱們不能由於他們的一些缺點而棄之，相反，咱們在開發過程當中，如果能利用好它們的優勢，並能對咱們的生產效率有着極大的提升做用。

更多網易技術、產品、運營經驗分享請訪問網易雲社區。

相關文章：
【推薦】 GDB抓蟲之旅（上篇）
【推薦】 ShimmerTextView
【推薦】 手把手教你建立私有podspec