Why webpack?

Edit this Page   

webpack is usually compared to tools like Make, Grunt, Gulp, Browserify or Brunch. However, some of these tools (Make, Grunt, and Gulp, which are task runners) have a much different purpose than webpack, which is a module bundler. Comparing them directly could lead to sorts of confusion, so let’s first draw a distinction between these types of tools.

What Are Task Runners?

Task runners literally make it easier to handle tasks, such as linting, building, or developing your project. Compared to bundlers like Browserify, Brunch, or webpack, they have a higher level focus. Bundlers, on the other hand, have a much more specific goal.

What Are Bundlers?

Roughly put bundlers take assets, such as JavaScript files in, and then transform them into format that's suitable for the browser of the end user to consume. This process of bundling happens to be one of the most important problems in web development and solving it well can remove a large part of pain from the process.

Bundlers can work in tandem with task runners. You can still benefit from their higher level tooling while leaving the problem of bundling to more specialized tools. grunt-webpack and gulp-webpack are good examples of integrations.

Often webpack users use npm scripts as their task runner. This is a good starting point. Cross-platform support can become a problem, but there are several workarounds for that.
Even though webpack core focuses on bundling, you can find a variety of extensions that allow you to use it in a task runner kind of way.

Comparison

webpack however is not the only module bundler out there. If you are choosing between using webpack or any of the bundler's 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
Additional chunks are loaded on demand yes yes no System.import no no
AMD define yes yes deamdify yes no yes
AMD require yes yes no yes no yes
AMD require loads on demand yes with manual configuration no yes no no
CommonJS exports yes only wrapping in define yes yes commonjs-plugin yes
CommonJS require yes only wrapping in define yes yes commonjs-plugin yes
CommonJS require.resolve yes no no no no
Concat in require require("./fi" + "le") yes no♦ no no no
Debugging support SourceUrl, SourceMaps not required SourceMaps SourceUrl, SourceMaps SourceUrl, SourceMaps SourceMaps
Dependencies 19MB / 127 packages 11MB / 118 packages 1.2MB / 1 package 26MB / 131 packages ?MB / 3 packages
ES2015 import/export yes(vr. 2) no no yes yes yes, via es6 module transpiler
Expressions in require (guided) require("./templates/" + template) yes (all files matching included) no♦ no no no no
Expressions in require (free) require(moduleName) with manual configuration no♦ no no no
Generate a single bundle yes yes♦ yes yes yes yes
Indirect require var r = require; r("./file") yes no♦ no no no
Load each file separate no yes no yes no no
Mangle path names yes no partial yes not required (path names are not included in the bundle) no
Minimizing uglify uglify, closure compiler uglifyify yes uglify-plugin UglifyJS-brunch
Multi pages build with common bundle with manual configuration yes with manual configuration with bundle arithmetic no no
Multiple bundles yes with manual configuration with manual configuration yes no yes
Node.js built-in libs require("path") yes no yes yes node-resolve-plugin
Other Node.js stuff process, __dir/filename, global - process, __dir/filename, global process, __dir/filename, global for cjs global (commonjs-plugin)
Plugins yes yes yes yes yes yes
Preprocessing loaders, transforms loaders transforms plugin translate plugin transforms compilers, optimizers
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
Requirable files file system web file system through plugins file system or through plugins file system
Runtime overhead 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)
Watch mode yes not required yes not needed in dev no yes

♦ in production mode (opposite in development mode)

X is the length of the path string


Contributors