Comparison

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

特性webpack/webpackjrburke/requirejssubstack/node-browserifyjspm/jspm-clirollup/rollupbrunch/brunch
按需加载额外 chunksyesyesnoSystem.importnono
AMD defineyesyesdeamdifyyesrollup-plugin-amdyes
AMD requireyesyesnoyesnoyes
AMD require 按需加载yes手动配置noyesnono
CommonJS exportsyes仅包裹在 defineyesyescommonjs-pluginyes
CommonJS requireyes仅包裹在 defineyesyescommonjs-pluginyes
CommonJS require.resolveyesnononono-
在 require 中使用拼接 require("./fi" + "le")yesno♦nonono-
调试支持SourceUrl, SourceMaps未引入SourceMapsSourceUrl, SourceMapsSourceUrl, SourceMapsSourceMaps
依赖列表(Dependencies)19MB / 127 个 package11MB / 118 个 package1.2MB / 1 package26MB / 131 个 package?MB / 3 个 package-
ES2015 import/exportyes (webpack 2)nonoyesyesyes,通过 es6 module 转译器
require 中使用表达式 (guided) require("./templates/" + template)yes(包含所有匹配到的文件)no♦nononono
require 中使用表达式 (free) require(moduleName)手动配置no♦nonono-
生成单文件 bundleyesyes♦yesyesyesyes
间接 require var r = require; r("./file")yesno♦nonono-
单独加载某个文件noyesnoyesnono
混淆路径名称yesno部分yes未引入(路径名称未包含在 bundle 中)no
压缩Terseruglify, closure compileruglifyifyyesuglify-pluginUglifyJS-brunch
使用 common bundle 构建多页应用手动配置yes手动配置使用 bundle 算法nono
多个 bundleyes手动配置手动配置yesnoyes
Node.js 内置库 require("path")yesnoyesyesnode-resolve-plugin-
其他 Node.js 相关内容process,__dir/filename,global-process,__dir/filename,globalprocess,__dir/filename,global for cjsglobal (commonjs-plugin)-
Pluginyesyesyesyesyesyes
预处理loadersloaderstransformsplugin translateplugin transformscompilers,optimizers
浏览器替换项web_modules.web.js,package.json 字段,别名(alias)配置项别名配置项package.json 字段,别名配置项package.json,别名配置项no-
读取文件文件系统web文件系统使用插件文件系统或者使用插件文件系统
运行时开销每个模块 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) 前 139BES2015 module 无开销 (其他格式可能会有)-
监听模式yes未引入watchifydev 中未引入rollup-watchyes

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

X 为路径字符串的长度

打包与加载

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

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

6 位贡献者

pksjcebebrawchrisVillanuevatashiansimon04byzyk

Webpack 5 现已正式发布。请阅读我们的 发布公告。如还未准备升级,请阅读 webpack 4 文档