Skip to content

Instantly share code, notes, and snippets.

@pavanpodila

pavanpodila/index.template.hbs

Last active June 30, 2020 01:35
Show Gist options
  • Save pavanpodila/9c3d854074ff425fd100b6515faedc0d to your computer and use it in GitHub Desktop.
Save pavanpodila/9c3d854074ff425fd100b6515faedc0d to your computer and use it in GitHub Desktop.
Download ZIP
Webpack, Karma Config files for Angular 1.5.x
Raw
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>
Raw
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}
}
}
});
};
Raw
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"
}
}
Raw
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);
Raw
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;
Raw
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
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment