本文由作者余伯贤授权网易云社区发布。

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
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: [
      {            @R_360_2187@: /.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/config...
中文：https://doc.webpack-china.org...

二、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 () {