比较
webpack 并非唯一的模块打包器。如果您正在选择使用 webpack 或以下任何打包器，这里是 webpack 与当前竞争对手的逐项功能比较。
| 功能 | webpack/webpack | jrburke/requirejs | substack/node-browserify | jspm/jspm-cli | rollup/rollup | brunch/brunch |
|---|---|---|---|---|---|---|
| 按需加载额外代码块 | 是 | 是 | 否 | System.import | 否 | 否 |
AMD define | 是 | 是 | deamdify | 是 | rollup-plugin-amd | 是 |
AMD require | 是 | 是 | 否 | 是 | 否 | 是 |
AMD require 按需加载 | 是 | 需手动配置 | 否 | 是 | 否 | 否 |
CommonJS exports | 是 | 仅在 define 中封装 | 是 | 是 | commonjs-plugin | 是 |
CommonJS require | 是 | 仅在 define 中封装 | 是 | 是 | commonjs-plugin | 是 |
CommonJS require.resolve | 是 | 否 | 否 | 否 | 否 | - |
在 require 中连接 require("./fi" + "le") | 是 | 否♦ | 否 | 否 | 否 | - |
| 调试支持 | SourceUrl, SourceMaps | 不需要 | SourceMaps | SourceUrl, SourceMaps | SourceUrl, SourceMaps | SourceMaps |
| 依赖 | 19MB / 127 个包 | 11MB / 118 个包 | 1.2MB / 1 个包 | 26MB / 131 个包 | ?MB / 3 个包 | - |
ES2015 import/export | 是 (webpack 2) | 否 | 否 | 是 | 是 | 是，通过 es6 模块转译器 |
require 中的表达式（引导式）require("./templates/" + template) | 是（所有匹配文件都包含在内） | 否♦ | 否 | 否 | 否 | 否 |
require 中的表达式（自由式）require(moduleName) | 需手动配置 | 否♦ | 否 | 否 | 否 | - |
| 生成单个打包文件 | 是 | 是♦ | 是 | 是 | 是 | 是 |
间接 require var r = require; r("./file") | 是 | 否♦ | 否 | 否 | 否 | - |
| 单独加载每个文件 | 否 | 是 | 否 | 是 | 否 | 否 |
| 混淆路径名 | 是 | 否 | 部分 | 是 | 不需要（路径名不包含在打包文件中） | 否 |
| 最小化 | Terser | uglify, closure compiler | uglifyify | 是 | uglify-plugin | UglifyJS-brunch |
| 多页面构建，带公共打包文件 | 需手动配置 | 是 | 需手动配置 | 通过打包算法 | 否 | 否 |
| 多个打包文件 | 是 | 需手动配置 | 需手动配置 | 是 | 否 | 是 |
Node.js 内置库 require("path") | 是 | 否 | 是 | 是 | node-resolve-plugin | - |
| 其他 Node.js 内容 | process, __dir/filename, global | - | process, __dir/filename, global | CommonJS 的 process, __dir/filename, global | global (commonjs-plugin) | - |
| 插件 | 是 | 是 | 是 | 是 | 是 | 是 |
| 预处理 | loader | loader | 转换 | 插件转译 | 插件转换 | 编译器，优化器 |
| 浏览器替换 | web_modules、.web.js、package.json 字段、别名配置选项 | 别名选项 | package.json 字段，别名选项 | package.json，别名选项 | 否 | - |
| 可 require 的文件 | 文件系统 | web | 文件系统 | 通过插件 | 文件系统或通过插件 | 文件系统 |
| 运行时开销 | 243B + 每个模块 20B + 每个依赖 4B | 14.7kB + 每个模块 0B + 每个依赖 (3B + X) | 415B + 每个模块 25B + 每个依赖 (6B + 2X) | 自执行打包文件 5.5kB，完整 loader 和 polyfill 38kB，0 个普通模块，CJS 293B，ES2015 System.register 139B（gzip 前） | ES2015 模块无开销（其他格式可能有） | - |
| 监听模式 | 是 | 不需要 | watchify | 开发环境下不需要 | rollup-watch | 是 |
♦ 生产模式下（与开发模式相反）
X 是路径字符串的长度
打包 vs. 加载
需要注意*加载*和*打包*模块之间的一些关键区别。像 SystemJS 这样的工具（JSPM 内部使用）用于在浏览器运行时加载和转译模块。这与 webpack 显著不同，webpack 在模块到达浏览器之前，会先对其进行转译（通过“loader”）和打包。
每种方法都有其优缺点。对于包含许多模块的大型网站和应用程序，在运行时加载和转译模块会增加大量开销。因此，SystemJS 更适用于需要较少模块的小型项目。然而，随着 HTTP/2 提升文件从服务器传输到客户端的速度，这种情况可能会有所改变。请注意，HTTP/2 不会改变模块转译的任何内容，客户端转译总是会花费更长时间。
下一页 »
精选 webpack6 贡献者
