Add recommendations and tutorials for JS bundling

[shawnbot]

This is related to dependency management, but might merit a page of its own. There are a couple of tools to consider:

• browserify
• webpack

I ended up going with browserify for the College Scorecard, but after talking with @jmcarp about it I tried out webpack and was sold.

Pitfalls

From what I can tell, browserify's simple plugability (transforms, piping) has created a larger plugin ecosystem than webpack's. However, the plugins themselves (in my case, minifyify) are sometimes poorly documented or just pass off a lot of their logic to lower-level libraries under the hood, which makes it hard to figure out how to configure them. Browserify also eschews any sort of external configuration, which means that you have to construct sometimes convoluted command-line arguments to chain together multiple plugins. Interoperability between plugins is not guaranteed, and I had lots of issues getting source maps to work with my minified JS using browserify plugins.

Webpack, on the other hand, comes pre-installed with a set of handy plugins (including minification), and accepts a configuration file, so it's much easier to configure and use. Rather than having to duplicate your long command-line arguments when running "build" and "watch" commands (with browserify and a completely separate tool called watchify, respectively), you just write your config once and call webpack to build or webpack --watch to watch.

Build time can become an issue on larger projects, though, and in my experience (with minification and source maps turned on), browserify wins hands down on that front. Webpack apparently caches in watch mode, but it's nowhere near as fast as browserify + minifyify.

[shawnbot]

(this is very much a WIP, as you can see)