Plugins and loaders are easy to write and allow you to control each step of the build, from loading and compiling CoffeeScript, LESS and JADE files to smart post processing and asset manifest building.
Using Webpack opens you up to npm, that has over 80k modules of which a great amount work both client-side and server-side. And the list is growing rapidly.
Webpack supports AMD and CommonJS module styles. It performs clever static analysis on the AST of your code. It even has an evaluation engine to evaluate simple expressions. This allows you to support most existing libraries.
To require a file, just use the require() function.
var foo = require('./foo.js');
These files may have dependencies of their own. Browserify will build a dependency graph and bundle it into a single file that you just have to put in a script tag.
<html>
<body>
<script src="bundle.js"></script>
</body>
</html>
Using browserify opens you up to npm, that has over 80k modules of which a great amount work both client-side and server-side. And the list is growing rapidly.
Writing plugins is relatively easy and straight forward as each file, you can run a function that gives a file name and path, based on that you can decide if you want to do something like parse, transform, modify etc the file or skip it.
Browserify includes transforms such as deAMDify, that allow you to use modules written in the AMD module format, and debowerify, that allows you to use modules intended to be managed by Bower package manager.
Browserify does nothing client-side. It's only a server-side builder. If you want to load files from other domains, look at RequireJS. If you want to break your code up into multiple modules, look at RequireJS or Webpack.
While it's not too hard to create npm package for an existing library, it means maintaining it when the library updates. While most libraries are now on npm, many client side specific libraries are not.
It's possible to require local files instead, at the expense of not having npm managed version control.
It creates a packages folders which are versioned. This makes it future proof for a time where we stop bundling all the code. In the following presentation Guy Bedford calls bundling an anti-pattern.
Bundling performance is slow, though offset by the fact that bundling is not required during development, since it can load dependencies asynchronously.
Brunch automatically produces a source map for all javascript files and CSS stylesheets whenever it minifies an app's resources. This little feature is extremely helpful when debugging is required at the client end.
After installing Brunch the next step is to load a skeleton from git.io/skeletons. This step is as easy as installing another plugin from the npm registry, just point Brunch to the path of the required skeleton/generator then wait for it to work out its magic. Next, run brunch build then wait for a second or two and voila! The project is ready.
According to speed benchmarks, Brunch is one of the fastest tools around for compiling files. According to the authors of Brunch the reason behind this speed is that it recompiles only the changes that were made to an app and performs extensive caching of the app's code.
Because of its easy to understand documentation, the RequireJS module loader is super simple to use; module definitions are as easy as defining just a key/value pair.
After building all the modules to be loaded, the built files can be optimized as well (minified and joint together), even though this is a completely optional step, but doing so could be a lot beneficial for your site's performance.
RequireJS is awesome for bundling and managing dependencies in an async manner. But the server-side needs neither of this killer features. Because of this it's not as good if your building a library that should work on both client and server (i.e. PouchDB).
The RequireJS module loader is extremely well documented. So no matter whether you're a pro at JS based web development or just a newbie, you will find the documentation very helpful whenever you're stuck or just starting out. Everything is well-defined and logically placed in proper sections in a manner such that it is very easy to understand.
Since the RequireJS is quite popular among the dev community, that automatically means that problems get sorted out very quickly and most of the core code has already been tested.
One of the best advantages of RequireJS over Browserify is that you don't need a nodejs environment to get started. Just "require" your dependencies and it takes care of loading them. By contrast, Browserify requires a running NodeJS implementation so you can build your one monolithic file, then you can push the file to your static web server.