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.
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.
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
scriptsas 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.
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.
|Additional chunks are loaded on demand||yes||yes||no||System.import||no||no|
||yes||with manual configuration||no||yes||no||no|
||yes||only wrapping in
||yes||only wrapping in
|Concat in require
|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|
||yes(vr. 2)||no||no||yes||yes||yes, via es6 module transpiler|
|Expressions in require (guided)
||yes (all files matching included)||no♦||no||no||no||no|
|Expressions in require (free)
||with manual configuration||no♦||no||no||no|
|Generate a single bundle||yes||yes♦||yes||yes||yes||yes|
|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
|Other Node.js stuff||process, __dir/filename, global||-||process, __dir/filename, global||process, __dir/filename, global for cjs||global (commonjs-plugin)|
|Preprocessing||loaders, transforms||loaders||transforms||plugin translate||plugin transforms||compilers, optimizers|
|Replacement for browser||
||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