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

一、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??br/>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/

二、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

三、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。

四、總結

Webpack和Rollup作為構建工具，都有著各自的優勢和各自的使用場景，我們不能因為他們的一些缺點而棄之，相反，我們在開發過程中，若是能利用好它們的優點，并能對我們的生產效率有著極大的提高作用。

---

作者：網易云
來源：CSDN
原文：https://blog.csdn.net/wangyiyungw/article/details/84955909
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

轉載于:https://blog.51cto.com/zhuxianzhong/2351010

總結

以上是生活随笔為你收集整理的Webpack vs Rollup的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。