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

2016-04-13 19:20:51 +02:00
parent 8b1683f513
commit 96238bbfab
39 changed files with 972 additions and 78 deletions
@@ -0,0 +1,5 @@
+dist
+!karma.webpack.conf.js
+!webpack.config.js
+!config/*
+!public/css/styles.css
@@ -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
@@ -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
+);
@@ -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
@@ -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
+
@@ -0,0 +1,26 @@
+// #docregion
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
+
+module.exports = webpackMerge(commonConfig, {
+  devtool: 'cheap-module-eval-source-map',
+  
+  output: {
+    path: helpers.root('dist'),
+    publicPath: 'http://localhost:8080/',
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js'
+  },
+  
+  plugins: [
+    new ExtractTextPlugin('[name].css')
+  ],
+  
+  devServer: {
+    historyApiFallback: true,
+    stats: 'minimal'
+  }
+});
+// #enddocregion
@@ -0,0 +1,36 @@
+// #docregion
+var webpack = require('webpack');
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+module.exports = webpackMerge(commonConfig, {
+  devtool: 'source-map',
+
+  output: {
+    path: helpers.root('dist'),
+    publicPath: '/',
+    filename: '[name].[hash].js',
+    chunkFilename: '[id].[hash].chunk.js'
+  },
+
+  htmlLoader: {
+    minimize: false // workaround for ng2
+  },
+
+  plugins: [
+    new webpack.NoErrorsPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin(),
+    new ExtractTextPlugin('[name].[hash].css'),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'ENV': JSON.stringify(ENV)
+      }
+    })
+  ]
+});
+// #enddocregion
@@ -0,0 +1,31 @@
+// #docregion
+module.exports = {
+  devtools: 'source-map',
+
+  resolve: {
+    extensions: ['', '.ts', '.js']
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        loader: 'ts'
+      },
+      {
+        test: /\.html$/,
+        loader: 'html'
+
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+        loader: 'null'
+      },
+      {
+        test: /\.css$/,
+        loader: 'null'
+      }
+    ]
+  }
+}
+// #enddocregion
@@ -0,0 +1,2 @@
+// #docregion
+module.exports = require('./config/karma.conf.js');
@@ -0,0 +1,48 @@
+{
+  "name": "angular2-webpack",
+  "version": "1.0.0",
+  "description": "A webpack starter for angular 2",
+  "scripts": {
+    "start": "webpack-dev-server --inline --progress --port 8080",
+    "test": "karma start",
+    "build": "rm -rf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
+    "postinstall": "typings install"
+  },
+  "license": "MIT",
+  "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-deprecated": "2.0.0-rc.1",
+    "es6-shim": "^0.35.0",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "0.6.12"
+  },
+  "devDependencies": {
+    "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.15.0",
+    "jasmine-core": "^2.4.1",
+    "karma": "^0.13.22",
+    "karma-jasmine": "^0.3.8",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "null-loader": "^0.1.1",
+    "phantomjs-prebuilt": "^2.1.7",
+    "raw-loader": "^0.5.1",
+    "style-loader": "^0.13.1",
+    "ts-loader": "^0.8.1",
+    "typescript": "^1.8.9",
+    "typings": "^0.7.12",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-merge": "^0.9.0"
+  }
+}
@@ -0,0 +1,6 @@
+/* #docregion */
+body {
+    background: #0147A7;
+    color: #fff;
+}
+/* #enddocregion */
@@ -0,0 +1,9 @@
+/* #docregion */
+main {
+  padding: 1em;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  margin-top: 50px;
+  display: block;
+}
+/* #enddocregion */
@@ -0,0 +1,7 @@
+<!-- #docregion -->
+<main>
+  <h1>Hello from Angular 2 App with Webpack</h1>
+
+  <img src="../../public/images/angular.png">
+</main>
+<!-- #enddocregion -->
@@ -0,0 +1,22 @@
+// #docregion
+import {
+  it,
+  inject,
+  describe,
+  beforeEachProviders,
+  expect
+} from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('App', () => {
+  beforeEachProviders(() => [
+    AppComponent
+  ]);
+
+  it ('should work', inject([AppComponent], (app: AppComponent) => {
+    // Add real test here
+    expect(2).toBe(2);
+  }));
+});
+// #enddocregion
@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import '../../public/css/styles.css';
+
+@Component({
+  selector: 'my-app',
+  template: require('./app.component.html'),
+  styles: [require('./app.component.css')]
+})
+export class AppComponent { }
+// #enddocregion
@@ -0,0 +1,2 @@
+// #docregion
+export * from './app.component.ts';
@@ -0,0 +1,14 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular With Webpack</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>
+<!-- #enddocregion -->
@@ -0,0 +1,14 @@
+// #docregion
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+
+import { AppComponent } from './app';
+
+// #docregion enable-prod
+if (process.env.ENV === 'production') {
+  enableProdMode();
+}
+// #enddocregion enable-prod
+
+bootstrap(AppComponent, []);
+// #enddocregion
@@ -0,0 +1,15 @@
+// #docregion
+import 'es6-shim';
+import 'reflect-metadata';
+require('zone.js/dist/zone');
+
+if (process.env.ENV === 'production') {
+  // Production
+
+} else {
+  // Development
+
+  Error['stackTraceLimit'] = Infinity;
+
+  require('zone.js/dist/long-stack-trace-zone');
+}
@@ -0,0 +1,15 @@
+// #docregion
+// Angular 2
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router-deprecated';
+
+// RxJS
+import 'rxjs';
+
+// Other vendors for example jQuery, Lodash or Bootstrap
+// You can import js, ts, css, sass, ...
+// #enddocregion
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "exclude": [
+    "node_modules",
+    "typings/main",
+    "typings/main.d.ts"
+  ]
+}
@@ -0,0 +1,7 @@
+{
+  "ambientDependencies": {
+    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "node": "registry:dt/node#4.0.0+20160509154515"
+  }
+}
@@ -0,0 +1,3 @@
+// #docregion
+module.exports = require('./config/webpack.dev.js');
+// #enddocregion