feat(examples): add webpack example with ng2-material and material2

 - demonstrate use of both libraries with RC1 and webpack.
 - strip down preboot/angular2-webpack to just a webpack config that loads ng2-material and material2
 - closes #175

modules/webpack/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/typings

modules/webpack/README.md

@@ -0,0 +1,16 @@
+# ng2-material webpack
+
+Ultra-minimal webpack project with ng2-material and material2.
+
+## Getting Started
+
+> npm install
+> npm start
+
+
+## Credits
+
+Webpack example based on https://github.com/preboot/angular2-webpack
+
+
+

modules/webpack/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "app",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "server": "webpack-dev-server --inline --progress --port 8080",
+    "start": "npm run server",
+    "postinstall": "$(npm bin)/typings install"
+  },
+  "dependencies": {
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/platform-browser": "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+    "@angular2-material/core": "^2.0.0-alpha.4",
+    "@angular2-material/toolbar": "^2.0.0-alpha.4",
+    "es6-shim": "^0.35.0",
+    "ng2-material": "file:../../dist",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "0.6.12"
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "^3.0.0",
+    "css-loader": "^0.23.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.4",
+    "html-loader": "^0.4.0",
+    "html-webpack-plugin": "^2.17.0",
+    "json-loader": "^0.5.3",
+    "ts-helpers": "^1.1.1",
+    "ts-loader": "^0.8.1",
+    "typescript": "^1.8.0",
+    "typings": "^0.8.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
+  }
+}

modules/webpack/src/main.ts

@@ -0,0 +1,131 @@
+import 'es6-shim';
+import 'reflect-metadata';
+require('zone.js/dist/zone');
+
+import '@angular/core';
+import '@angular/common';
+
+import '@angular2-material/core';
+
+import {Component} from '@angular/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+
+import {MATERIAL_BROWSER_PROVIDERS, MATERIAL_DIRECTIVES} from 'ng2-material';
+import {MdToolbar} from '@angular2-material/toolbar';
+
+import 'ng2-material/ng2-material.css';
+import 'ng2-material/font/font.css';
+
+@Component({
+  selector: 'my-app',
+  directives: [MATERIAL_DIRECTIVES, MdToolbar],
+  template: `<md-card>
+  <md-toolbar color="primary">ng2-material, material2, and webpack</md-toolbar>
+<md-content>
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <button md-button>{{title1}}</button>
+    <button md-button md-no-ink class="md-primary">Primary (md-noink)</button>
+    <button md-button disabled="true" class="md-primary">Disabled</button>
+    <button md-button class="md-warn">{{title4}}</button>
+    <div class="label">Flat</div>
+  </section>
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <button md-raised-button class="md-raised">Button</button>
+    <button md-raised-button class="md-raised md-primary">Primary</button>
+    <button md-raised-button disabled="true" class="md-raised md-primary">Disabled</button>
+    <button md-raised-button class="md-raised md-warn">Warn</button>
+    <div class="label">Raised</div>
+  </section>
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <button md-fab class="md-fab" aria-label="Eat cake">
+      <i md-icon>cake</i>
+    </button>
+    <button md-fab class="md-primary" aria-label="Use Android">
+      <i md-icon>android</i>
+    </button>
+    <button md-fab disabled="true" aria-label="Comment">
+      <i md-icon>comment</i>
+    </button>
+    <button md-fab class="md-primary md-hue-2" aria-label="Profile">
+      <i md-icon>people</i>
+    </button>
+    <button md-fab class="md-mini" aria-label="Eat cake">
+      <i md-icon>cake</i>
+    </button>
+    <button md-fab class="md-mini md-primary" aria-label="Use Android">
+      <i md-icon>android</i>
+    </button>
+    <div class="label">FAB</div>
+  </section>
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <a md-button [href]="googleUrl" target="_blank">Default Link</a>
+    <a md-button class="md-primary" [href]="googleUrl" target="_blank">Primary Link</a>
+    <button md-button>Default Button</button>
+    <div class="label">Link vs. Button</div>
+  </section>
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <button md-button class="md-primary md-hue-1">Primary Hue 1</button>
+    <button md-raised-button class="md-warn md-hue-2">Warn Hue 2</button>
+    <button md-button class="md-accent">Accent</button>
+    <button md-raised-button class="md-accent md-hue-1">Accent Hue 1</button>
+    <div class="label">Themed</div>
+  </section>
+  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
+    <button md-button class="md-icon-button md-primary" aria-label="Settings">
+      <i md-icon>menu</i>
+    </button>
+    <button md-button class="md-icon-button md-accent" aria-label="Favorite">
+      <i md-icon>favorite</i>
+    </button>
+    <button md-button class="md-icon-button" aria-label="More">
+      <i md-icon>more_vert</i>
+    </button>
+    <a md-button href="http://google.com"
+       title="Launch Google.com in new window"
+       target="_blank"
+       disabled="true"
+       aria-label="Google.com"
+       class="md-icon-button launch">
+      <i md-icon>launch</i>
+    </a>
+    <div class="label">Icon Button</div>
+  </section>
+</md-content>
+</md-card>
+`,
+  styles: [
+    `section {
+        background: #f7f7f7;
+        border-radius: 3px;
+        text-align: center;
+        margin: 1em;
+        position: relative !important;
+        padding-bottom: 10px;
+        [md-button], [md-raised-button], [md-fab] {
+          margin-top: 16px;
+          margin-bottom: 16px;
+        }
+      }
+      
+      md-content {
+        margin-right: 7px;
+      }
+      
+      .label {
+        position: absolute;
+        bottom: 5px;
+        left: 7px;
+        font-size: 14px;
+        opacity: 0.54;
+      }
+    `]
+
+})
+class AppComponent {
+}
+
+bootstrap(AppComponent, [
+  // Your other app providers
+  ...MATERIAL_BROWSER_PROVIDERS
+])
+  .catch(err => console.error(err));

modules/webpack/src/public/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Angular 2 App | ng2-webpack</title>
+    <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
+
+    <base href="./">
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>

modules/webpack/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "commonjs",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "sourceMap": true
+  },
+  "exclude": [
+    "node_modules",
+    "typings/main",
+    "typings/main.d.ts"
+  ],
+  "compileOnSave": false,
+  "buildOnSave": false
+}

modules/webpack/typings.json

@@ -0,0 +1,9 @@
+{
+  "ambientDevDependencies": {
+    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
+  },
+  "ambientDependencies": {
+    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
+    "node": "registry:dt/node#4.0.0+20160501135006"
+  }
+}

modules/webpack/webpack.config.js

@@ -0,0 +1,116 @@
+// Helper: root(), and rootDir() are defined at the bottom
+var path = require('path');
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = function makeWebpackConfig() {
+  var isProd = false;
+
+  /**
+   * Config
+   * Reference: http://webpack.github.io/docs/configuration.html
+   * This is the object where all configuration gets set
+   */
+  var config = {};
+
+  /**
+   * Entry
+   * Reference: http://webpack.github.io/docs/configuration.html#entry
+   */
+  config.entry = {
+    app: './src/main.ts' // our angular app
+  };
+
+  /**
+   * Output
+   * Reference: http://webpack.github.io/docs/configuration.html#output
+   */
+  config.output = {
+    path: root('dist'),
+    publicPath: 'http://localhost:8080/',
+    filename: 'js/[name].js'
+  };
+
+  /**
+   * Resolve
+   * Reference: http://webpack.github.io/docs/configuration.html#resolve
+   */
+  config.resolve = {
+    cache: true,
+    root: root(),
+    // only discover files that have those extensions
+    extensions: ['', '.js', '.ts', '.css']
+  };
+
+  /**
+   * Loaders
+   * Reference: http://webpack.github.io/docs/configuration.html#module-loaders
+   * List: http://webpack.github.io/docs/list-of-loaders.html
+   * This handles most of the magic responsible for converting modules
+   */
+  config.module = {
+    loaders: [
+      // Support for .ts files.
+      {
+        test: /\.ts$/,
+        loader: 'ts',
+        exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
+      },
+      // Support for CSS as raw text
+      // all css in src/style will be bundled in an external css file
+      {
+        test: /\.css$/,
+        exclude: root('src', 'app'),
+        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
+      },
+      // all css required in src/app files will be merged in js files
+      {test: /\.css$/, include: root('src'), loader: 'raw'},
+
+      // load font files
+      {test: /\.woff$/, loader: 'url?limit=100000'},
+      {test: /\.woff2$/, loader: 'url?limit=100000'},
+      {test: /\.ttf/, loader: 'url?limit=100000'},
+      {test: /\.eot/, loader: 'url?limit=100000'}
+
+    ],
+    postLoaders: [],
+    noParse: [/.+zone\.js\/dist\/.+/]
+  };
+
+  /**
+   * Plugins
+   * Reference: http://webpack.github.io/docs/configuration.html#plugins
+   * List: http://webpack.github.io/docs/list-of-plugins.html
+   */
+  config.plugins = [
+    // Inject script and link tags into html files
+    // Reference: https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      template: './src/public/index.html'
+    }),
+
+    // Extract css files
+    // Reference: https://github.com/webpack/extract-text-webpack-plugin
+    new ExtractTextPlugin('css/[name].css')
+  ];
+
+  /**
+   * Dev server configuration
+   * Reference: http://webpack.github.io/docs/configuration.html#devserver
+   * Reference: http://webpack.github.io/docs/webpack-dev-server.html
+   */
+  config.devServer = {
+    contentBase: './src/public',
+    historyApiFallback: true,
+    stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
+  };
+
+  return config;
+}();
+
+// Helper functions
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [__dirname].concat(args));
+}