webpack 与其他工具对比

---

title: Comparison
sort: 1
contributors:

• pksjce
• bebraw
• chrisVillanueva
• tashian
• simon04
• byzyk
  related:
• title: JSPM vs. webpack
  url: https://ilikekillnerds.com/2015/07/jspm-vs-webpack/
• title: webpack vs. Browserify vs. SystemJS
  url: https://engineering.velocityapp.com/webpack-vs-browersify-vs-systemjs-for-spas-95b349a41fa0

---

webpack 并不是唯一的模块打包器。如果你正在 webpack 和以下任一打包器之间做选择，这里有一个逐项对比，展示 webpack 与当前竞争对手的对比情况。

特性	webpack/webpack	jrburke/requirejs	substack/node-browserify	jspm/jspm-cli	rollup/rollup	brunch/brunch
附加代码块按需加载	yes	yes	no	System.import	no	no
AMD define	yes	yes	deamdify	yes	rollup-plugin-amd	yes
AMD require	yes	yes	no	yes	no	yes
AMD require 按需加载	yes	需手动配置	no	yes	no	no
CommonJS exports	yes	仅在 define 中包装	yes	yes	commonjs-plugin	yes
CommonJS require	yes	仅在 define 中包装	yes	yes	commonjs-plugin	yes
CommonJS require.resolve	yes	no	no	no	no
require 中拼接 require("./fi" + "le")	yes	no♦	no	no	no
调试支持	SourceUrl, SourceMaps	不需要	SourceMaps	SourceUrl, SourceMaps	SourceUrl, SourceMaps	SourceMaps
依赖	19MB / 127 packages	11MB / 118 packages	1.2MB / 1 package	26MB / 131 packages	?MB / 3 packages
ES2015 import/export	yes（webpack 2）	no	no	yes	yes	yes, via es6 module transpiler
require 中的表达式（受限）require("./templates/" + template)	yes（包含所有匹配的文件）	no♦	no	no	no	no
require 中的表达式（自由）require(moduleName)	需手动配置	no♦	no	no	no
生成单个 bundle	yes	yes♦	yes	yes	yes	yes
间接 require var r = require; r("./file")	yes	no♦	no	no	no
单独加载每个文件	no	yes	no	yes	no	no
混淆路径名称	yes	no	部分支持	yes	不需要（路径名不包含在 bundle 中）	no
压缩	Terser	uglify, closure compiler	uglifyify	yes	uglify-plugin	UglifyJS-brunch
使用公共 bundle 的多页面构建	需手动配置	yes	需手动配置	通过 bundle 运算	no	no
多个 bundle	yes	需手动配置	需手动配置	yes	no	yes
Node.js 内置库 require("path")	yes	no	yes	yes	node-resolve-plugin
其他 Node.js 特性	process, __dir/filename, global	-	process, __dir/filename, global	process, __dir/filename, global for cjs	global (commonjs-plugin)
插件	yes	yes	yes	yes	yes	yes
预处理	loaders	loaders	transforms	plugin translate	plugin transforms	compilers, optimizers
浏览器替代方案	web_modules、.web.js、package.json 字段、alias 配置选项	alias 选项	package.json 字段、alias 选项	package.json、alias 选项	no
可 require 的文件	文件系统	web	文件系统	通过插件	文件系统或通过插件	文件系统
运行时开销	每个模块 243B + 20B + 每个依赖 4B	14.7kB + 每个模块 0B +（每个依赖 3B + X）	415B + 每个模块 25B +（每个依赖 6B + 2X）	自执行 bundle 5.5kB，完整 loader 和 polyfill 38kB，普通模块 0，CJS 293B，ES2015 System.register gzip 前 139B	ES2015 模块无开销（其他格式可能有）
监视模式	yes	不需要	watchify	开发时不需要	rollup-watch	yes

♦ 在生产模式下（与开发模式相反）

X 是路径字符串的长度

打包与加载

区分模块的 加载（loading） 与 打包（bundling） 非常重要。像 SystemJS 这样的工具（位于 JSPM 底层）用于在浏览器中运行时加载和转译模块。这与 webpack 有显著不同：webpack 在模块到达浏览器之前通过“loader”进行转译并打包。

每种方法各有优缺点。在运行时加载和转译模块，对于由许多模块组成的大型站点和应用来说，会带来大量额外开销。因此，SystemJS 更适合模块数量较少的小型项目。不过，随着 HTTP/2 提高文件从服务器传输到客户端的速度，这种情况可能会有所改变。请注意，HTTP/2 不会改变模块的 转译 方式，在客户端进行转译始终会更耗时。