systemjs to webpack (#3)

Author: Rafat Rashid

.gitignore

@@ -1,4 +1,6 @@
-app/out/
+compiled/
+dist/
 docs/
 .DS_Store
 node_modules/
+npm-debug.log

README.md

@@ -13,13 +13,22 @@ Proof of concept Angular 2 app.
 ## Screen Clipping
 ![App Screen](https://raw.github.com/EnemyUnited/angular2app/master/resources/screen.png)
 
+## Useful Commands
+```sh
+npm start       # start webpack dev server and watch for changes
+npm run build   # minify and build production bundles under dist/
+```
+
 ## Documentation
 Angular documentation is generated using https://compodoc.github.io/compodoc/. Generate the html pages with:
-```
+```sh
 npm run docs
 ```
 
 ## Recommended IDEs
  - Atom: https://atom.io/
    - And install Atom's TypeScript package: https://atom.io/packages/atom-typescript
  - Visual Code: https://code.visualstudio.com/
+
+## Reference
+ - Webpack configuration: https://v2.angular.io/docs/ts/latest/guide/webpack.html

config/helpers.js

@@ -0,0 +1,9 @@
+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;

config/karma.conf.js

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

config/webpack.common.js

@@ -0,0 +1,59 @@
+var webpack = require('webpack');
+var helpers = require('./helpers');
+
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'app': './src/main.ts'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js']
+    },
+
+    module: {
+        rules: [{
+            test: /\.ts$/,
+            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
+        }, {
+            test: /\.html$/,
+            loader: 'html-loader'
+        }, {
+            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+            loader: 'file-loader?name=assets/[name].[hash].[ext]'
+        }, {
+            test: /\.css$/,
+            exclude: helpers.root('src', 'app'),
+            loader: ExtractTextPlugin.extract({
+                fallbackLoader: 'style-loader',
+                loader: 'css-loader?sourceMap'
+            })
+        }, {
+            test: /\.css$/,
+            include: helpers.root('src', 'app'),
+            loader: 'raw-loader'
+        }]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['app', 'vendor', 'polyfills']
+        }),
+
+        new HtmlWebpackPlugin({
+            template: 'src/index.html'
+        })
+    ]
+};

config/webpack.dev.js

@@ -0,0 +1,25 @@
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+var helpers = require('./helpers');
+var commonConfig = require('./webpack.common.js');
+
+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'
+    }
+});

config/webpack.prod.js

@@ -0,0 +1,39 @@
+var webpack = require('webpack');
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+var helpers = require('./helpers');
+var commonConfig = require('./webpack.common.js');
+
+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'
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            }
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});

config/webpack.test.js

@@ -0,0 +1,40 @@
+var webpack = require('webpack');
+var helpers = require('./helpers');
+
+module.exports = {
+    devtool: 'inline-source-map',
+
+    resolve: {
+        extensions: ['.ts', '.js']
+    },
+
+    module: {
+        rules: [{
+            test: /\.ts$/,
+            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
+        }, {
+            test: /\.html$/,
+            loader: 'html-loader'
+        }, {
+            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+            loader: 'null-loader'
+        }, {
+            test: /\.css$/,
+            exclude: helpers.root('src', 'app'),
+            loader: 'null-loader'
+        }, {
+            test: /\.css$/,
+            include: helpers.root('src', 'app'),
+            loader: 'raw-loader'
+        }]
+    },
+
+    plugins: [
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        )
+    ]
+}

index.html

@@ -0,0 +1 @@
+module.exports = require('./config/karma.conf.js');

karma.conf.js

@@ -3,12 +3,11 @@
     "version": "1.0.0",
     "description": "Angular 2 App",
     "scripts": {
+        "start": "webpack-dev-server --inline --progress --port 8080",
+        "test": "karma start",
+        "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
         "docs": "compodoc -p tsconfig.json -d docs",
-        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
-        "lint": "tslint ./app/**/*.ts -t verbose || true",
-        "lite": "lite-server",
-        "tsc": "tsc",
-        "tsc:w": "tsc -w"
+        "lint": "tslint ./app/**/*.ts -t verbose || true"
     },
     "keywords": [],
     "author": "Rafat Rashid",
@@ -25,22 +24,33 @@
         "bootstrap": "^3.3.7",
         "core-js": "^2.4.1",
         "rxjs": "5.0.1",
-        "systemjs": "0.19.40",
         "zone.js": "^0.7.4"
     },
     "devDependencies": {
-        "@types/jasmine": "^2.5.36",
-        "@types/node": "^6.0.46",
-        "canonical-path": "0.0.2",
+        "@types/jasmine": "2.5.36",
+        "@types/node": "^6.0.45",
+        "angular2-template-loader": "^0.6.0",
+        "awesome-typescript-loader": "^3.0.4",
         "compodoc": "0.0.41",
-        "concurrently": "^3.1.0",
-        "http-server": "^0.9.0",
-        "lite-server": "^2.2.2",
-        "lodash": "^4.16.4",
-        "rimraf": "^2.5.4",
+        "css-loader": "^0.26.1",
+        "extract-text-webpack-plugin": "2.0.0-beta.5",
+        "file-loader": "^0.9.0",
+        "html-loader": "^0.4.3",
+        "html-webpack-plugin": "^2.16.1",
+        "jasmine-core": "^2.4.1",
+        "karma": "^1.2.0",
+        "karma-chrome-launcher": "^2.0.0",
+        "karma-jasmine": "^1.0.2",
+        "karma-sourcemap-loader": "^0.3.7",
+        "karma-webpack": "^2.0.1",
+        "null-loader": "^0.1.1",
+        "raw-loader": "^0.5.1",
+        "rimraf": "^2.5.2",
+        "style-loader": "^0.13.1",
         "tslint": "^3.15.1",
-        "typedoc": "^0.5.9",
-        "typescript": "~2.0.10"
-    },
-    "repository": {}
+        "typescript": "~2.0.10",
+        "webpack": "2.2.1",
+        "webpack-dev-server": "2.4.1",
+        "webpack-merge": "^3.0.0"
+    }
 }

package.json

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'my-app',
-    templateUrl: 'app/app.template.html',
+    templateUrl: './app.template.html',
 })
 
 export class AppComponent { }

app/app.component.ts renamed to src/app/app.component.ts

@@ -5,7 +5,7 @@ import { AbstractValueAccessor, AccessorProvider } from '../library/abstractValu
 
 @Component({
     selector: 'ix-dropdown-single[ngModel]',
-    templateUrl: 'app/common/components/singleSelectDropdown.template.html',
+    templateUrl: './singleSelectDropdown.template.html',
     providers: [AccessorProvider(SingleSelectDropdownComponent)],
     host: { '(selectedChange)': 'onChange($event)' },
 })

app/app.module.ts renamed to src/app/app.module.ts

@@ -10,7 +10,7 @@ import { HeroesService } from '../services/heroes.service';
 
 @Component({
     selector: 'hero-form',
-    templateUrl: 'app/heroes/components/hero-form.template.html'
+    templateUrl: './hero-form.template.html'
 })
 
 export class HeroFormComponent implements OnInit {

app/app.template.html renamed to src/app/app.template.html

@@ -9,7 +9,7 @@ import { HeroesService } from '../services/heroes.service';
 
 @Component({
     selector: 'hero-roster',
-    templateUrl: 'app/heroes/components/hero-roster.template.html'
+    templateUrl: './hero-roster.template.html'
 })
 
 export class HeroRosterComponent implements OnInit {

app/common/components/singleSelectDropdown.component.ts renamed to src/app/common/components/singleSelectDropdown.component.ts

@@ -14,8 +14,8 @@ export class HeroesService {
 
     constructor(private api: ApiService) { }
 
-    private heroesUrl = 'app/heroes/models/heroes.json';
-    private powersUrl = 'app/heroes/models/powers.json';
+    private heroesUrl = 'src/app/heroes/models/heroes.json';
+    private powersUrl = 'src/app/heroes/models/powers.json';
 
     getPowers(): Observable<any[]> {
         return this.api.get(this.powersUrl);