比较
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 编译器 | uglifyify | 是 | uglify-plugin | UglifyJS-brunch |
| 使用公共包构建多页 | 通过手动配置 | 是 | 通过手动配置 | 带包算法 | 否 | 否 |
| 多个包 | 是 | 通过手动配置 | 通过手动配置 | 是 | 否 | 是 |
Node.js 内置库 require("path") | 是 | 否 | 是 | 是 | node-resolve-plugin | - |
| 其他 Node.js 内容 | process、__dir/filename、global | - | process、__dir/filename、global | process、__dir/filename、global（用于 cjs） | global (commonjs-plugin) | - |
| 插件 | 是 | 是 | 是 | 是 | 是 | 是 |
| 预处理 | 加载器 | 加载器 | 转换 | 插件翻译 | 插件转换 | 编译器、优化器 |
| 浏览器替换 | web_modules、.web.js、package.json 字段、别名配置选项 | 别名选项 | package.json 字段、别名选项 | package.json、别名选项 | 否 | - |
| 可请求的文件 | 文件系统 | 网络 | 文件系统 | 通过插件 | 文件系统或通过插件 | 文件系统 |
| 运行时开销 | 243B + 每模块 20B + 每依赖项 4B | 14.7kB + 每模块 0B + 每依赖项 (3B + X) | 415B + 每模块 25B + 每依赖项 (6B + 2X) | 自执行包为 5.5kB，完整加载器和多态填充为 38kB，0 个普通模块，293B CJS，139B ES2015 System.register（压缩前） | ES2015 模块无（其他格式可能会有） | - |
| 监视模式 | 是 | 不需要 | watchify | 开发中不需要 | rollup-watch | 是 |
♦ 在生产模式中（在开发模式中相反）
X 是路径字符串的长度
捆绑与加载
注意加载和捆绑模块之间的一些关键区别非常重要。诸如 SystemJS 之类的工具（可以在 JSPM 的底层找到）用于在浏览器中加载和转换模块。这与 webpack 有很大不同，在 webpack 中，模块在进入浏览器之前被转换（通过“加载器”）和捆绑。
每种方法都有其优点和缺点。在运行时加载和转换模块会给包含很多模块的大型网站和应用程序增加很多开销。因此，对于需要较少模块的较小项目，SystemJS 更为合理。但是，随着 HTTP/2 提高了文件从服务器传输到客户端的速度，这种情况可能会发生一些变化。请注意，HTTP/2 不会改变转换模块的任何内容，而客户端执行此操作时始终需要更长时间。
下一步 »
真棒的 webpack6 位贡献者
