摘要：年月份的時(shí)候，將的構(gòu)建工具換成了。的特點(diǎn)代碼分割有兩種組織模塊依賴(lài)的方式，同步和異步。而目前在中大型項(xiàng)目中使用得非常廣泛。更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。文章來(lái)源網(wǎng)易云社區(qū)

本文由作者余伯賢授權(quán)網(wǎng)易云社區(qū)發(fā)布。

2017年4月份的時(shí)候，F(xiàn)acebook將React的構(gòu)建工具換成了Rollup。很多人就有疑問(wèn)了，Webpack不也是Facebook團(tuán)隊(duì)開(kāi)發(fā)的嗎，為什么不使用它而是要換成第三方構(gòu)建工具呢？先別急，等你看完這篇文章，你就知道為什么了。

一、Webpack
誕生于2012年，目前Javascript社區(qū)使用得比較多的構(gòu)建工具。它的出現(xiàn)，解決了當(dāng)時(shí)的構(gòu)建工具不能處理的問(wèn)題——構(gòu)建復(fù)雜的單頁(yè)面應(yīng)用(SPA)。它是一個(gè)強(qiáng)力的模塊打包器。 所謂包(bundle)就是一個(gè) JavaScript 文件，它把一堆資源(assets)合并在一起，以便它們可以在同一個(gè)文件請(qǐng)求中發(fā)回給客戶(hù)端。 包中可以包含 JavaScript、CSS 樣式、HTML 以及很多其它類(lèi)型的文件。

Webpack的特點(diǎn)
代碼分割
Webpack 有兩種組織模塊依賴(lài)的方式，同步和異步。異步依賴(lài)作為分割點(diǎn)，形成一個(gè)新的塊。在優(yōu)化了依賴(lài)樹(shù)后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。

Loader(加載器)
Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類(lèi)型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。

智能解析
Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫(kù)，無(wú)論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴(lài)的時(shí)候，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")。

插件系統(tǒng)
Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開(kāi)發(fā)和使用開(kāi)源的 Webpack 插件，來(lái)滿(mǎn)足各式各樣的需求。

開(kāi)始使用
安裝
目前webpack最新版本是3.0.0

npm i webpack -g
npm i webpack@version -g
配置
在項(xiàng)目添加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
    })
]);

}
打開(kāi)命令控制臺(tái)，執(zhí)行：

webpack# or webpack --config webpack.config.js
此時(shí)你應(yīng)該可以在項(xiàng)目目錄的dist文件夾里找到打包好的文件了。

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

二、Rollup
Rollup是下一代JavaScript模塊打包工具。開(kāi)發(fā)者可以在你的應(yīng)用或庫(kù)中使用ES2015模塊，然后高效地將它們打包成一個(gè)單一文件用于瀏覽器和Node.js使用。 Rollup最令人激動(dòng)的地方，就是能讓打包文件體積很小。這么說(shuō)很難理解，更詳細(xì)的解釋?zhuān)合啾绕渌鸍avaScript打包工具，Rollup總能打出更小，更快的包。因?yàn)镽ollup基于ES2015模塊，比Webpack和Browserify使用的CommonJS模塊機(jī)制更高效。這也讓Rollup從模塊中刪除無(wú)用的代碼，即tree-shaking變得更容易。

Rollup的特點(diǎn)
Tree-shaking
這個(gè)特點(diǎn)，是Rollup最初推出時(shí)的一大特點(diǎn)。Rollup通過(guò)對(duì)代碼的靜態(tài)分析，分析出冗余代碼，在最終的打包文件中將這些冗余代碼刪除掉，進(jìn)一步縮小代碼體積。這是目前大部分構(gòu)建工具所不具備的特點(diǎn)(Webpack 2.0+已經(jīng)支持了，但是我本人覺(jué)得沒(méi)有Rollup做得干凈)。

ES2015模塊打包支持
這個(gè)也是其他構(gòu)建工具所不具備的。Rollup直接不需要通過(guò)babel將import轉(zhuǎn)化成Commonjs的require方式，極大地利用ES2015模塊的優(yōu)勢(shì)。

使用
先在全局安裝好rollup

npm i rollup -g
然后我們?cè)賱?chuàng)建一個(gè)簡(jiǎn)單的項(xiàng)目：

mkdir -p my-rollup-project/src
cd my-rollup-project
編寫(xiě)好入口文件：

// src/main.jsimport foo from "./foo.js";export default function () {

  console.log(foo);

}
然后，創(chuàng)建一個(gè)名為foo.js的文件

// src/foo.jsexport default "hello world!";
最后，打開(kāi)命令行，執(zhí)行下面的命令吧：

rollup src/main.js --format cjs
打包結(jié)果：

"use strict";var foo = "hello world!";var main = function () { console.log(foo);
};module.exports = main;
你也可以打包出一個(gè)名為bundle.js的文件：

rollup src/main.js --format cjs --output bundle.js# or rollup main.js -f cjs -o bundle.js
其他使用方式可查看官網(wǎng)文檔：
https://rollupjs.org

三、Webpack與Rollup的對(duì)比
其實(shí)，通過(guò)分別對(duì)Webpack和Rollup的介紹，不難看出，Webpack和Rollup在不同場(chǎng)景下，都能發(fā)揮自身優(yōu)勢(shì)作用。Webpack對(duì)于代碼分割和靜態(tài)資源導(dǎo)入有著“先天優(yōu)勢(shì)”，并且支持熱模塊替換(HMR)，而Rollup并不支持，所以當(dāng)項(xiàng)目需要用到以上，則可以考慮選擇Webpack。但是，Rollup對(duì)于代碼的Tree-shaking和ES6模塊有著算法優(yōu)勢(shì)上的支持，若你項(xiàng)目只需要打包出一個(gè)簡(jiǎn)單的bundle包，并是基于ES6模塊開(kāi)發(fā)的，可以考慮使用Rollup。
其實(shí)Webpack從2.0開(kāi)始支持Tree-shaking，并在使用babel-loader的情況下支持了es6 module的打包了，實(shí)際上，Rollup已經(jīng)在漸漸地失去了當(dāng)初的優(yōu)勢(shì)了。但是它并沒(méi)有被拋棄，反而因其簡(jiǎn)單的API、使用方式被許多庫(kù)開(kāi)發(fā)者青睞，如React、Vue等，都是使用Rollup作為構(gòu)建工具的。而Webpack目前在中大型項(xiàng)目中使用得非常廣泛。
最后，用一句話(huà)概括就是：在開(kāi)發(fā)應(yīng)用時(shí)使用 Webpack，開(kāi)發(fā)庫(kù)時(shí)使用 Rollup。

四、總結(jié)
Webpack和Rollup作為構(gòu)建工具，都有著各自的優(yōu)勢(shì)和各自的使用場(chǎng)景，我們不能因?yàn)樗麄兊囊恍┤秉c(diǎn)而棄之，相反，我們?cè)陂_(kāi)發(fā)過(guò)程中，若是能利用好它們的優(yōu)點(diǎn)，并能對(duì)我們的生產(chǎn)效率有著極大的提高作用。

更多網(wǎng)易技術(shù)、產(chǎn)品、運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。

文章來(lái)源： 網(wǎng)易云社區(qū)