pavanpodila/index.template.hbs

## index.template.hbs
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{htmlWebpackPlugin.options.title}}</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/images/favicon.png">

    {{#htmlWebpackPlugin.files.css}}
        <link rel="stylesheet" href="{{.}}">
    {{/htmlWebpackPlugin.files.css}}

</head>
<body>

<app-root></app-root>

{{#htmlWebpackPlugin.files.js}}
    <script src="{{.}}"></script>
{{/htmlWebpackPlugin.files.js}}

</body>
</html>

## karma.config.js
var webpackConfig = require('./webpack-test.config');

module.exports = function (config) {
    config.set({
        basePath: '.',
        frameworks: ['jasmine'],

        reporters: ['mocha', 'coverage'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['PhantomJS'],
        singleRun: true,
        autoWatchBatchDelay: 300,

        files: [
            'specs.js'
        ],

        preprocessors: {
            'specs.js': ['webpack', 'sourcemap']
        },

        webpack: webpackConfig,

        webpackMiddleware: {
            stats: 'minimal'
        },

        coverageReporter: {
            dir: 'coverage',
            reporters: [
                {type: 'html', subdir: 'report-html'}
            ],
            instrumenterOptions: {
                istanbul: {noCompact: true}
            }
        }
    });
};

## package.json
{
  "name": "angular-app",
  "description": "App using Angular 1.x",
  "dependencies": {
    "@angular/router": "^0.2.0",
    "angular": "^1.5.3",
    "angular-animate": "^1.5.3",
    "angular-aria": "^1.5.3",
    "angular-material": "^1.0.6",
    "angular-messages": "^1.5.3",
    "lodash": "^4.6.1"
  },
  "devDependencies": {
    "angular-mocks": "^1.5.3",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.6.0",
    "babel-preset-es2015": "^6.6.0",
    "clean-webpack-plugin": "^0.1.8",
    "copy-webpack-plugin": "^1.1.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "handlebars": "^4.0.5",
    "handlebars-loader": "^1.2.0",
    "html-webpack-plugin": "^2.14.0",
    "istanbul-instrumenter-loader": "^0.2.0",
    "jasmine": "^2.4.1",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^0.13.22",
    "karma-coverage": "^0.5.5",
    "karma-jasmine": "^0.3.8",
    "karma-mocha-reporter": "^2.0.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.7.0",
    "ng-annotate-loader": "^0.1.0",
    "node-sass": "^3.4.2",
    "opn-cli": "^3.1.0",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.2.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "test": "karma start karma.config.js",
    "test:watch": "karma start karma.config.js --no-single-run --auto-watch",
    "test:nocover:watch": "NO_COVERAGE=true karma start karma.config.js --no-single-run --auto-watch",
    "build": "webpack -p"
  }
}

## specs.js
require('./src/app');
require('./node_modules/angular-mocks/angular-mocks');

// Include *.spec.js files
var context = require.context('./src', true, /.+\.spec\.js$/);
context.keys().forEach(context);

## webpack-test.config.js
'use strict';

var webpackConfig = require('./webpack.config');
Object.assign(webpackConfig, {
    entry: './specs.js',
    devtool: 'cheap-module-inline-source-map'
});

var disableCoverage = !!process.env.NO_COVERAGE;
if (!disableCoverage) {

    webpackConfig.module.postLoaders = [
        { //delays coverage till after tests are run
            test: /\.js$/,
            exclude: [
                /\.spec\.js/,
                /node_modules/
            ],
            loader: 'istanbul-instrumenter'
        }
    ];
}

module.exports = webpackConfig;

## webpack.config.js
'use strict';

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    debug: true,
    devtool: 'cheap-module-source-map',
    devServer: {
        inline: true,
        stats: 'minimal',
        historyApiFallback: true
    },

    module: {
        loaders: [
            {
                test: /\.hbs$/, loader: 'handlebars'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: [
                    'ng-annotate',
                    'babel?presets[]=es2015&plugins[]=transform-runtime'
                ]
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('css?sourceMap')
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract(['css?sourceMap', 'sass?sourceMap'].join('!'))
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?name=[name].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            }
        ]
    },
    resolve: {
        // ensure loader extensions match
        extensions: ['', '.js', '.json', '.scss', '.css', '.html']
    },
    plugins: [
        new CleanWebpackPlugin(['dist'], {
            root: __dirname,
            verbose: true,
            dry: false
        }),
        new CopyWebpackPlugin([{from: 'src/assets'}]),
        new ExtractTextPlugin('app.css'),
        new HtmlWebpackPlugin({
            title: 'SGM Trader',
            template: './index.template.hbs',
            inject: false
        })
    ]
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>{{htmlWebpackPlugin.options.title}}</title>
	<base href="/">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="/images/favicon.png">

	{{#htmlWebpackPlugin.files.css}}
	<link rel="stylesheet" href="{{.}}">
	{{/htmlWebpackPlugin.files.css}}

	</head>
	<body>

	<app-root></app-root>

	{{#htmlWebpackPlugin.files.js}}
	<script src="{{.}}"></script>
	{{/htmlWebpackPlugin.files.js}}

	</body>
	</html>
	var webpackConfig = require('./webpack-test.config');

	module.exports = function (config) {
	config.set({
	basePath: '.',
	frameworks: ['jasmine'],

	reporters: ['mocha', 'coverage'],
	port: 9876,
	colors: true,
	logLevel: config.LOG_INFO,
	autoWatch: false,
	browsers: ['PhantomJS'],
	singleRun: true,
	autoWatchBatchDelay: 300,

	files: [
	'specs.js'
	],

	preprocessors: {
	'specs.js': ['webpack', 'sourcemap']
	},

	webpack: webpackConfig,

	webpackMiddleware: {
	stats: 'minimal'
	},

	coverageReporter: {
	dir: 'coverage',
	reporters: [
	{type: 'html', subdir: 'report-html'}
	],
	instrumenterOptions: {
	istanbul: {noCompact: true}
	}
	}
	});
	};
	{
	"name": "angular-app",
	"description": "App using Angular 1.x",
	"dependencies": {
	"@angular/router": "^0.2.0",
	"angular": "^1.5.3",
	"angular-animate": "^1.5.3",
	"angular-aria": "^1.5.3",
	"angular-material": "^1.0.6",
	"angular-messages": "^1.5.3",
	"lodash": "^4.6.1"
	},
	"devDependencies": {
	"angular-mocks": "^1.5.3",
	"babel-core": "^6.7.4",
	"babel-loader": "^6.2.4",
	"babel-plugin-transform-runtime": "^6.6.0",
	"babel-preset-es2015": "^6.6.0",
	"clean-webpack-plugin": "^0.1.8",
	"copy-webpack-plugin": "^1.1.1",
	"css-loader": "^0.23.1",
	"extract-text-webpack-plugin": "^1.0.1",
	"file-loader": "^0.8.5",
	"handlebars": "^4.0.5",
	"handlebars-loader": "^1.2.0",
	"html-webpack-plugin": "^2.14.0",
	"istanbul-instrumenter-loader": "^0.2.0",
	"jasmine": "^2.4.1",
	"jasmine-core": "^2.4.1",
	"json-loader": "^0.5.4",
	"karma": "^0.13.22",
	"karma-coverage": "^0.5.5",
	"karma-jasmine": "^0.3.8",
	"karma-mocha-reporter": "^2.0.0",
	"karma-phantomjs-launcher": "^1.0.0",
	"karma-sourcemap-loader": "^0.3.7",
	"karma-webpack": "^1.7.0",
	"ng-annotate-loader": "^0.1.0",
	"node-sass": "^3.4.2",
	"opn-cli": "^3.1.0",
	"phantomjs-prebuilt": "^2.1.7",
	"raw-loader": "^0.5.1",
	"sass-loader": "^3.2.0",
	"webpack": "^1.12.14",
	"webpack-dev-server": "^1.14.1"
	},
	"scripts": {
	"start": "webpack-dev-server",
	"test": "karma start karma.config.js",
	"test:watch": "karma start karma.config.js --no-single-run --auto-watch",
	"test:nocover:watch": "NO_COVERAGE=true karma start karma.config.js --no-single-run --auto-watch",
	"build": "webpack -p"
	}
	}
	require('./src/app');
	require('./node_modules/angular-mocks/angular-mocks');

	// Include *.spec.js files
	var context = require.context('./src', true, /.+\.spec\.js$/);
	context.keys().forEach(context);
	'use strict';

	var webpackConfig = require('./webpack.config');
	Object.assign(webpackConfig, {
	entry: './specs.js',
	devtool: 'cheap-module-inline-source-map'
	});

	var disableCoverage = !!process.env.NO_COVERAGE;
	if (!disableCoverage) {

	webpackConfig.module.postLoaders = [
	{ //delays coverage till after tests are run
	test: /\.js$/,
	exclude: [
	/\.spec\.js/,
	/node_modules/
	],
	loader: 'istanbul-instrumenter'
	}
	];
	}

	module.exports = webpackConfig;
	'use strict';

	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var ExtractTextPlugin = require('extract-text-webpack-plugin');
	var CopyWebpackPlugin = require('copy-webpack-plugin');
	var CleanWebpackPlugin = require('clean-webpack-plugin');

	var webpack = require('webpack');
	var path = require('path');

	module.exports = {
	entry: {
	app: './src/app.js'
	},
	output: {
	path: path.join(__dirname, 'dist'),
	filename: '[name].js'
	},
	debug: true,
	devtool: 'cheap-module-source-map',
	devServer: {
	inline: true,
	stats: 'minimal',
	historyApiFallback: true
	},

	module: {
	loaders: [
	{
	test: /\.hbs$/, loader: 'handlebars'
	},
	{
	test: /\.js$/,
	exclude: /node_modules/,
	loaders: [
	'ng-annotate',
	'babel?presets[]=es2015&plugins[]=transform-runtime'
	]
	},
	{
	test: /\.css$/,
	loader: ExtractTextPlugin.extract('css?sourceMap')
	},
	{
	test: /\.scss$/,
	loader: ExtractTextPlugin.extract(['css?sourceMap', 'sass?sourceMap'].join('!'))
	},
	{
	test: /\.html$/,
	loader: 'raw-loader'
	},
	{
	test: /\.json$/,
	loader: 'json-loader'
	},
	{
	test: /\.(jpe?g\|png\|gif\|svg)$/i,
	loaders: [
	'file?name=[name].[ext]',
	'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
	]
	}
	]
	},
	resolve: {
	// ensure loader extensions match
	extensions: ['', '.js', '.json', '.scss', '.css', '.html']
	},
	plugins: [
	new CleanWebpackPlugin(['dist'], {
	root: __dirname,
	verbose: true,
	dry: false
	}),
	new CopyWebpackPlugin([{from: 'src/assets'}]),
	new ExtractTextPlugin('app.css'),
	new HtmlWebpackPlugin({
	title: 'SGM Trader',
	template: './index.template.hbs',
	inject: false
	})
	]
	};