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.
| Tool | Additional chunks are loaded on demand | AMD define | AMD require | AMD require loads on demand | CommonJS exports | CommonJS require | CommonJS require.resolve | Concat in require require("./fi" + "le") | Debugging support | Dependencies | ES2015 import/export | Expressions in require (guided) require("./templates/" + template) | Expressions in require (free) require(moduleName) | Generate single bundle | Indirect require var r = require; r("./file") | Load each file separate | Mangle path names | Minimizing | Multi pages build | Multiple bundles | Node.js built-in libs require("path") | Other Node.js stuff | Plugins | Preprocessing | Replacement for browser | Requirable files | Runtime overhead | Watch mode |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| webpack/webpack | yes | yes | yes | yes | yes | yes | yes | yes | SourceUrl, SourceMaps | 19MB / 127 packages | yes (webpack 2) | yes (all files matching included) | with manual configuration | yes | yes | no | yes | Terser | with manual configuration | yes | yes | process, __dir/filename, global | yes | loaders | web_modules, .web.js, package.json field, alias configuration option | 243B + 20B per module + 4B per dependency | yes | yes |
| jrburke/requirejs | yes | yes | yes | with manual configuration | only wrapping in define | only wrapping in define | no | no♦ | not required | 11MB / 118 packages | no | no♦ | no♦ | yes♦ | no♦ | yes | no | uglify, closure compiler | yes | with manual configuration | no | - | yes | loaders | alias options | web | 14.7kB + 0B per module + (3B + X) per dependency | not required |
| substack/node-browserify | no | deamdify | no | no | yes | yes | no | no | SourceMaps | 1.2MB / 1 package | no | no | no | yes | no | no | partial | uglifyify | with manual configuration | with manual configuration | yes | process, __dir/filename, global | yes | transforms | package.json field, alias option | file system | 415B + 25B per module + (6B + 2X) per dependency | watchify |
| jspm/jspm-cli | System.import | yes | yes | yes | yes | yes | no | no | SourceUrl, SourceMaps | 26MB / 131 packages | yes | no | no | yes | no | yes | yes | yes | with bundle arithmetic | yes | yes | process, __dir/filename, global for cjs | yes | plugin translate | package.json, alias option | through plugins | 5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzip | not needed in dev |
| rollup/rollup | no | rollup-plugin-amd | no | no | commonjs-plugin | commonjs-plugin | no | no | SourceUrl, SourceMaps | ?MB / 3 packages | yes | no | no | yes | no | no | not required (path names are not included in the bundle) | uglify-plugin | no | no | node-resolve-plugin | global (commonjs-plugin) | yes | plugin transforms | no | file system or through plugins | none for ES2015 modules (other formats may have) | rollup-watch |
| brunch/brunch | no | yes | yes | no | yes | yes | - | - | SourceMaps | - | yes, via es6 module transpiler | no | - | yes | - | no | no | UglifyJS-brunch | no | yes | - | - | yes | compilers, optimizers | - | file system | - | 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.
Further Reading
7 Contributors
