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