chore(build): Move to webpack for bundling/building

[smathson]

Resolves #88.

Included in this PR:

• npm start script kicks off webpack-dev-server with livereload and a non-minified build with SourceMaps.
• Split package.json dependencies into dependencies and devDependencies
• Templates and styles are imported where used so that webpack pulls them in and bundles them. Might want to look into making most styles more sandboxed to a component and maybe even utilize NG2s shadowDOM stuff.
• Font Awesome and the Intl polyfill are still being CDNed, everything else is being imported from their locally installed npm modules
• npm build bundles, minifies and hashes the application for production and outputs to the build directory
• npm server will serve locally whatever is in the build directory (for testing production build locally)

Notes:

• Still cannot get rid of all uses of require in favor of ES6-style import. For templates see: Importing files other than TS modules microsoft/TypeScript#2709 and Support shorthand ambient module declarations and wildcard chars in module names microsoft/TypeScript#6615
• Now that gulp is gone, you've got an extra directory level to the application source that can probably go away (src/ instead of src/main), but that's up to you. Left it alone because I didn't want this PR to be more disruptive than necessary.

Size of the production build:

The fully minified vendor.js is ~800kb. That seems large to me and I wasn't able to make it any smaller with the experimentation I did.

The idea behind splitting the main.js and vendor.js files is that your vendored dependencies are not changing as often as your application files are. With the bundled files hashed, your users will have the larger vendor file cached locally and they won't need to pull it down again with an application update if the dependencies don't change. So even though it's a larger file, hopefully it's being fetched infrequently.

The alternative would be to do away with the vendor.ts entry point and just let everything bundle into a main.ts. That said, even when I experimented with pulling imports out of vendor.ts (like say Angular 2) and letting the application dependencies pull them in as needed, it just shifted a similar size of the bundle from vendor to main. Webpack 2 is supposed to be including some form of tree-shaking during minification so that might help, but it's still in beta at the moment.

I added an npm stats script that will do a production build and spit out a stats.json for use at http://webpack.github.io/analyse/ to help figure out where all module dependencies are coming from if you want to look into it in more detail.

Webpack Information Sources:

I relied heavily on http://survivejs.com/webpack_react/building_kanban and https://github.com/AngularClass/angular2-webpack-starter to get to this point. Angular2 with TypeScript is in a weird spot for Webpack right now, requiring a bunch of polyfills and workarounds that I stole from angular2-webpack-starter (but which seems entirely too complex to just use outright). The SurviveJS Webpack React example is much simpler for understanding the core concepts and I used their approach for building a common webpack.config.js that was sensitive to environment which I thought was cleaner than duplicating things in two separate configs.

Let me know if you have any questions. Won't have much time over the next few weeks to keep working on this but I think this is a good starting point that you can continue to refine or change as you go.

Cheers!

[NiXXeD]

👍 ran it all locally... seems to work great. Thanks!

Selling yourself short with that chore commit =) this is a feature!