Comparison

webpack 并非唯一的模块打包工具。当您面临选择 webpack 或者是其他模块打包工具时,请参见以下 webpack 与其他竞品的功能对比表格。

特性 webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

按需加载额外 chunks

yes

yes yes no System.import no no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

AMD define

yes

yes yes deamdify yes rollup-plugin-amd yes

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

AMD require

yes

yes yes no yes no yes

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

AMD require 按需加载

yes

yes 手动配置 no yes no no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

CommonJS exports

yes

yes 仅包裹在 define yes yes commonjs-plugin yes

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

CommonJS require

yes

yes 仅包裹在 define yes yes commonjs-plugin yes

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

CommonJS require.resolve

yes

yes no no no no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

在 require 中使用拼接 require("./fi" + "le")

yes

yes no♦ no no no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

调试支持

SourceUrl, SourceMaps

SourceUrl, SourceMaps 未引入 SourceMaps SourceUrl, SourceMaps SourceUrl, SourceMaps SourceMaps

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

依赖列表(Dependencies)

19MB / 127 个 package

19MB / 127 个 package 11MB / 118 个 package 1.2MB / 1 package 26MB / 131 个 package ?MB / 3 个 package

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

ES2015 import/export

yes (webpack 2)

yes (webpack 2) no no yes yes yes,通过 es6 module 转译器

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

require 中使用表达式 (guided) require("./templates/" + template)

yes(包含所有匹配到的文件)

yes(包含所有匹配到的文件) no♦ no no no no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

require 中使用表达式 (free) require(moduleName)

手动配置

手动配置 no♦ no no no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

生成单文件 bundle

yes

yes yes♦ yes yes yes yes

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

间接 require var r = require; r("./file")

yes

yes no♦ no no no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

单独加载某个文件

no

no yes no yes no no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

混淆路径名称

yes

yes no 部分 yes 未引入(路径名称未包含在 bundle 中) no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

压缩

Terser

Terser uglify, closure compiler uglifyify yes uglify-plugin UglifyJS-brunch

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

使用 common bundle 构建多页应用

手动配置

手动配置 yes 手动配置 使用 bundle 算法 no no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

多个 bundle

yes

yes 手动配置 手动配置 yes no yes

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Node.js 内置库 require("path")

yes

yes no yes yes node-resolve-plugin

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

其他 Node.js 相关内容

process,__dir/filename,global

process,__dir/filename,global - process,__dir/filename,global process,__dir/filename,global for cjs global ( commonjs-plugin )

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

Plugin

yes

yes yes yes yes yes yes

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

预处理

loaders

loaders loaders transforms plugin translate plugin transforms compilers,optimizers

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

浏览器替换项

web_modules.web.js,package.json 字段,别名(alias)配置项

web_modules.web.js ,package.json 字段,别名(alias)配置项 别名配置项 package.json 字段,别名配置项 package.json,别名配置项 no

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

读取文件

文件系统

文件系统 web 文件系统 使用插件 文件系统或者使用插件 文件系统

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

运行时开销

每个模块 243B + 20B + 每个依赖 4B

每个模块 243B + 20B + 每个依赖 4B 每个模块 14.7kB + 0B + 每个依赖 (3B + X) 每个模块 415B + 25B + 每个依赖 (6B + 2X) 自运行 bundle 5.5kB,所有 loader 和 polyfill 38kB,普通模块 0,293B CJS,ES2015 System.register 压缩 (gzip) 前 139B ES2015 module 无开销 (其他格式可能会有)

特性

webpack/webpack

jrburke/requirejs

substack/node-browserify

jspm/jspm-cli

rollup/rollup

brunch/brunch

监听模式

yes

yes 未引入 watchify dev 中未引入 rollup-watch yes

♦ 为生成模式 (开发模式取反值)

X 为路径字符串的长度

打包与加载

了解 loadingbundling 模块的一些主要区别是很有必要的。比如像 SystemJS 这类的工具,本质上是基于 JSPM, 常应用于在浏览器运行时加载和转译模块。这就与 webpack 有很大的差异,因为在 webpack 中模块是在浏览器加载之前,就已经被转译过(通过 loaders 转译)并打包的。

每种方法都有其长,也有其短。如果是包括较多模块的大型网站和应用程序,在运行时加载和转译模块,会使其增加许多开销。故而,SystemJS 更加适用于模块较少的小型项目。不过,在判定哪些文件可以从服务端转到客户端时,HTTP/2 倒是能提升一些速度。请注意,HTTP/2 并不会改变 transpiling 模块,所以在客户端会增加时间开销。