Additional chunks are loaded on demand
yes
Comparison
webpack is not the only module bundler out there. If you are choosing between using webpack or any of the bundlers below, here is a feature-by-feature comparison on how webpack fares against the current competition.
| Feature | webpack/webpack | jrburke/requirejs | substack/node-browserify | jspm/jspm-cli | rollup/rollup | brunch/brunch |
|---|---|---|---|---|---|---|
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch |
yes | yes | no | System.import | no | no |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch AMD yes |
yes | yes | deamdify | yes | rollup-plugin-amd | yes |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch AMD yes |
yes | yes | no | yes | no | yes |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch AMD yes |
yes | with manual configuration | no | yes | no | no |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch CommonJS yes |
yes | only wrapping in
define |
yes | yes | commonjs-plugin | yes |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch CommonJS yes |
yes | only wrapping in
define |
yes | yes | commonjs-plugin | yes |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch CommonJS yes |
yes | no | no | no | no | |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Concat in require yes |
yes | no♦ | no | no | no | |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Debugging support SourceUrl, SourceMaps |
SourceUrl, SourceMaps | not required | SourceMaps | SourceUrl, SourceMaps | SourceUrl, SourceMaps | SourceMaps |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Dependencies 19MB / 127 packages |
19MB / 127 packages | 11MB / 118 packages | 1.2MB / 1 package | 26MB / 131 packages | ?MB / 3 packages | |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch ES2015 yes (webpack 2) |
yes (webpack 2) | no | no | yes | yes | yes, via es6 module transpiler |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Expressions in require (guided) yes (all files matching included) |
yes (all files matching included) | no♦ | no | no | no | no |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Expressions in require (free) with manual configuration |
with manual configuration | no♦ | no | no | no | |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Generate a single bundle yes |
yes | yes♦ | yes | yes | yes | yes |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Indirect require yes |
yes | no♦ | no | no | no | |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Load each file separate no |
no | yes | no | yes | no | no |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Mangle path names yes |
yes | no | partial | yes | not required (path names are not included in the bundle) | no |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Minimizing terser |
terser | uglify, closure compiler | uglifyify | yes | uglify-plugin | UglifyJS-brunch |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Multi pages build with common bundle with manual configuration |
with manual configuration | yes | with manual configuration | with bundle arithmetic | no | no |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Multiple bundles yes |
yes | with manual configuration | with manual configuration | yes | no | yes |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Node.js built-in libs yes |
yes | no | yes | yes | node-resolve-plugin | |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Other Node.js stuff process, __dir/filename, global |
process, __dir/filename, global | - | process, __dir/filename, global | process, __dir/filename, global for cjs | global ( commonjs-plugin ) | |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Plugins yes |
yes | yes | yes | yes | yes | yes |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Preprocessing loaders, transforms |
loaders, transforms | loaders | transforms | plugin translate | plugin transforms | compilers, optimizers |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Replacement for browser
|
web_modules
,
.web.js
, package.json field, alias config option |
alias option | package.json field, alias option | package.json, alias option | no | |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Requirable files file system |
file system | web | file system | through plugins | file system or through plugins | file system |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Runtime overhead 243B + 20B per module + 4B per dependency |
243B + 20B per module + 4B per dependency | 14.7kB + 0B per module + (3B + X) per dependency | 415B + 25B per module + (6B + 2X) per dependency | 5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzip | none for ES2015 modules (other formats may have) | |
Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup brunch/brunch Watch mode yes |
yes | not required | watchify | not needed in dev | rollup-watch | yes |
♦ in production mode (opposite in development mode)
X is the length of the path string
Bundling vs. Loading
It's important to note some key differences between loading and bundling modules. A tool like SystemJS, which can be found under the hood of JSPM, is used to load and transpile modules at runtime in the browser. This differs significantly from webpack, where modules are transpiled (through "loaders") and bundled before hitting the browser.
Each method has its advantages and disadvantages. Loading and transpiling modules at runtime can add a lot of overhead for larger sites and applications comprised of many modules. For this reason, SystemJS makes more sense for smaller projects where fewer modules are required. However, this may change a bit as HTTP/2 will improve the speed at which files can be transferred from server to client. Note that HTTP/2 doesn't change anything about transpiling modules, which will always take longer when done client-side.
