docs(cb-webpack): add guide chapter about webpack

Author: Foxandxss

public/docs/_examples/package.json

@@ -13,48 +13,64 @@
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "typings": "typings",
-    "webdriver:update": "webdriver-manager update"
+    "webdriver:update": "webdriver-manager update",
+    "start:webpack": "webpack-dev-server --inline --progress --port 8080",
+    "test:webpack": "karma start karma.webpack.conf.js",
+    "build:webpack": "rm -rf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@angular/common":  "2.0.0-rc.1",
-    "@angular/compiler":  "2.0.0-rc.1",
-    "@angular/core":  "2.0.0-rc.1",
-    "@angular/http":  "2.0.0-rc.1",
-    "@angular/platform-browser":  "2.0.0-rc.1",
-    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
-    "@angular/router":  "2.0.0-rc.1",
-    "@angular/router-deprecated":  "2.0.0-rc.1",
-    "@angular/upgrade":  "2.0.0-rc.1",
-
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/compiler": "2.0.0-rc.1",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/http": "2.0.0-rc.1",
+    "@angular/platform-browser": "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+    "@angular/router": "2.0.0-rc.1",
+    "@angular/router-deprecated": "2.0.0-rc.1",
+    "@angular/upgrade": "2.0.0-rc.1",
     "systemjs": "0.19.27",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
-
     "angular2-in-memory-web-api": "0.0.7",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
-    "concurrently": "^2.0.0",
-    "lite-server": "^2.2.0",
-    "typescript": "^1.8.10",
-    "typings": "^0.8.1",
-
     "canonical-path": "0.0.2",
+    "concurrently": "^2.0.0",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
+    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.16.1",
     "http-server": "^0.9.0",
-    "lodash": "^4.11.1",
-    "jasmine-core": "~2.4.1",
+    "jasmine-core": "^2.4.1",
     "karma": "^0.13.22",
     "karma-chrome-launcher": "^0.2.3",
     "karma-cli": "^0.1.2",
     "karma-htmlfile-reporter": "^0.2.2",
     "karma-jasmine": "^0.3.8",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "lite-server": "^2.2.0",
+    "lodash": "^4.11.1",
+    "null-loader": "^0.1.1",
+    "phantomjs-prebuilt": "^2.1.7",
     "protractor": "^3.3.0",
-    "rimraf": "^2.5.2"
+    "raw-loader": "^0.5.1",
+    "rimraf": "^2.5.2",
+    "style-loader": "^0.13.1",
+    "ts-loader": "^0.8.2",
+    "typescript": "^1.8.10",
+    "typings": "^0.8.1",
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-merge": "^0.12.0"
   },
   "repository": {}
 }

public/docs/_examples/quickstart/ts/typings.1.json

@@ -1,6 +1,7 @@
 {
   "ambientDependencies": {
     "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
+    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "node": "registry:dt/node#4.0.0+20160509154515"
   }
 }

public/docs/_examples/quickstart/ts/typings.d.1.ts

@@ -1,6 +1,7 @@
 {
   "ambientDependencies": {
     "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
+    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "node": "registry:dt/node#4.0.0+20160509154515"
   }
 }

public/docs/_examples/typings.json

@@ -0,0 +1,5 @@
+dist
+!karma.webpack.conf.js
+!webpack.config.js
+!config/*
+!public/css/styles.css

public/docs/_examples/typings/typings.d.ts

@@ -0,0 +1,12 @@
+// #docregion
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
+// #enddocregion

public/docs/_examples/webpack/ts/.gitignore

@@ -0,0 +1,22 @@
+// #docregion
+Error.stackTraceLimit = Infinity;
+
+require('es6-shim');
+require('reflect-metadata');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+
+var appContext = require.context('../src', true, /\.spec\.ts/);
+
+appContext.keys().forEach(appContext);
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.setBaseTestProviders(
+  browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
+);

public/docs/_examples/webpack/ts/config/helpers.js

@@ -0,0 +1,39 @@
+// #docregion
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '',
+
+    frameworks: ['jasmine'],
+
+    files: [
+      {pattern: './config/karma-test-shim.js', watched: false}
+    ],
+
+    preprocessors: {
+      './config/karma-test-shim.js': ['webpack', 'sourcemap']
+    },
+
+    webpack: webpackConfig,
+
+    webpackMiddleware: {
+      stats: 'errors-only'
+    },
+
+    webpackServer: {
+      noInfo: true
+    },
+
+    reporters: ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    browsers: ['PhantomJS'],
+    singleRun: true
+  };
+
+  config.set(_config);
+};
+// #enddocregion

public/docs/_examples/webpack/ts/config/karma-test-shim.js

@@ -0,0 +1,64 @@
+// #docregion
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var helpers = require('./helpers');
+
+module.exports = {
+  // #docregion entries
+  entry: {
+    'polyfills': './src/polyfills.ts',
+    'vendor': './src/vendor.ts',
+    'app': './src/main.ts'
+  },
+  // #enddocregion
+
+  // #docregion resolve
+  resolve: {
+    extensions: ['', '.js', '.ts']
+  },
+  // #enddocregion resolve
+
+  // #docregion loaders
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        loader: 'ts'
+      },
+      {
+        test: /\.html$/,
+        loader: 'html'
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+        loader: 'file?name=assets/[name].[hash].[ext]'
+      },
+      {
+        test: /\.css$/,
+        exclude: helpers.root('src', 'app'),
+        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
+      },
+      {
+        test: /\.css$/,
+        include: helpers.root('src', 'app'),
+        loader: 'raw'
+      }
+    ]
+  },
+  // #enddocregion loaders
+
+  // #docregion plugins
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin({
+      name: ['app', 'vendor', 'polyfills']
+    }),
+
+    new HtmlWebpackPlugin({
+      template: 'src/index.html'
+    })
+  ]
+  // #enddocregion plugins
+};
+// #enddocregion
+