Skip to content

Instantly share code, notes, and snippets.

@miamarti

miamarti/karma.conf.js

Last active April 17, 2019 11:50
Show Gist options
  • Save miamarti/e5d23523b7893d39661196ffe51a6b38 to your computer and use it in GitHub Desktop.
Save miamarti/e5d23523b7893d39661196ffe51a6b38 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS WebPack
Raw
karma.conf.js
// Reference: http://karma-runner.github.io/0.12/config/configuration-file.html
module.exports = function karmaConfig (config) {
config.set({
frameworks: [
// Reference: https://github.com/karma-runner/karma-jasmine
// Set framework to jasmine
'jasmine'
],
reporters: [
// Reference: https://github.com/mlex/karma-spec-reporter
// Set reporter to print detailed results to console
'progress',
// Reference: https://github.com/karma-runner/karma-coverage
// Output code coverage files
'coverage'
],
files: [
// Grab all files in the app folder that contain .spec.
'src/tests.webpack.js'
],
preprocessors: {
// Reference: http://webpack.github.io/docs/testing.html
// Reference: https://github.com/webpack/karma-webpack
// Convert files with webpack and load sourcemaps
'src/tests.webpack.js': ['webpack', 'sourcemap']
},
browsers: [
// Run tests using PhantomJS
'PhantomJS'
],
singleRun: true,
// Configure code coverage reporter
coverageReporter: {
dir: 'coverage/',
reporters: [
{type: 'text-summary'},
{type: 'html'}
]
},
webpack: require('./webpack.config'),
// Hide webpack build information from output
webpackMiddleware: {
noInfo: 'errors-only'
}
});
};
Raw
package.json
{
"name": "angularjs-webpack",
"version": "1.1.0",
"description": "",
"scripts": {
"build": "rimraf dist && webpack --bail --progress --profile",
"server": "webpack-dev-server --history-api-fallback --inline --progress",
"test": "karma start",
"test-watch": "karma start --auto-watch --no-single-run",
"start": "npm run server"
},
"repository": {
"type": "git",
"url": ""
},
"devDependencies": {
"ajv": "^6.4.0",
"angular-mocks": "^1.7.0",
"autoprefixer": "^8.4.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.1.18",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"istanbul-instrumenter-loader": "^3.0.1",
"jasmine-core": "^3.1.0",
"karma": "^2.0.2",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "^0.0.32",
"karma-webpack": "^3.0.0",
"node-libs-browser": "^2.1.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.4",
"postcss-loader": "^2.1.5",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.1",
"style-loader": "^0.21.0",
"webpack": "^2.7.0",
"webpack-dev-server": "^2.11.2"
}
}
Raw
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
browsers: ['last 2 versions']
},
},
};
Raw
src--app--app.js
import angular from 'angular';
import '../style/app.css';
let app = () => {
return {
template: require('./app.html'),
controller: 'AppCtrl',
controllerAs: 'app'
}
};
class AppCtrl {
constructor() {
this.url = 'https://github.com/preboot/angular-webpack';
}
}
const MODULE_NAME = 'app';
angular.module(MODULE_NAME, [])
.directive('app', app)
.controller('AppCtrl', AppCtrl);
export default MODULE_NAME;
Raw
src--app--app.spec.js
import app from './app';
describe('app', () => {
describe('AppCtrl', () => {
let ctrl;
beforeEach(() => {
angular.mock.module(app);
angular.mock.inject(($controller) => {
ctrl = $controller('AppCtrl', {});
});
});
it('should contain the starter url', () => {
expect(ctrl.url).toBe('https://github.com/preboot/angular-webpack');
});
});
});
Raw
src--app.html
<main>
<h1 class="title">Hello from Angular !</h1>
<img src="/img/logo.png">
</main>
<footer>
<a ng-href="{{app.url}}">...</a>
</footer>
Raw
src--public--index.html
<!doctype html>
<html ng-app="app" lang="en">
<head>
<meta charset="UTF-8">
<title>Angular App</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
</head>
<body>
<app></app>
</body>
</html>
Raw
src--style--app.css
body {
background: #0147A7;
color: #fff;
}
a {
color: #03A9F4;
}
main {
padding: 1em;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin-top: 50px;
display: block;
}
footer {
text-align: center;
font-size: 0.8em;
}
Raw
src--tests.webpack.js
import 'angular';
import 'angular-mocks/angular-mocks';
const context = require.context('./app', true, /\.js$/);
context.keys().forEach(context);
Raw
webpack.config.js
'use strict';
// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';
module.exports = function makeWebpackConfig() {
var config = {};
config.entry = isTest ? void 0 : {
app: './src/app/app.js'
};
config.output = isTest ? {} : {
// Absolute output directory
path: __dirname + '/dist',
// Output path from the view of the page
// Uses webpack-dev-server in development
publicPath: '/',
// Filename for entry points
// Only adds hash in build mode
filename: isProd ? '[name].[hash].js' : '[name].bundle.js',
// Filename for non-entry points
// Only adds hash in build mode
chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js'
};
if (isTest) {
config.devtool = 'inline-source-map';
}
else if (isProd) {
config.devtool = 'source-map';
}
else {
config.devtool = 'eval-source-map';
}
/**
* Loaders
*/
// Initialize module
config.module = {
rules: [{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
// CSS LOADER
// Reference: https://github.com/webpack/css-loader
// Allow loading css through js
//
// Reference: https://github.com/postcss/postcss-loader
// Postprocess your css with PostCSS plugins
test: /\.css$/,
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files in production builds
//
// Reference: https://github.com/webpack/style-loader
// Use style-loader in development.
loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{loader: 'css-loader', query: {sourceMap: true}},
{loader: 'postcss-loader'}
],
})
}, {
// ASSET LOADER
// Reference: https://github.com/webpack/file-loader
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
// Rename the file using the asset hash
// Pass along the updated reference to your code
// You can add here any file extension you want to get copied to your output
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file-loader'
}, {
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'raw-loader'
}]
};
// ISTANBUL LOADER
// https://github.com/deepsweet/istanbul-instrumenter-loader
// Instrument JS files with istanbul-lib-instrument for subsequent code coverage reporting
// Skips node_modules and files that end with .spec.js
if (isTest) {
config.module.rules.push({
enforce: 'pre',
test: /\.js$/,
exclude: [
/node_modules/,
/\.spec\.js$/
],
loader: 'istanbul-instrumenter-loader',
query: {
esModules: true
}
})
}
/**
* PostCSS
* Reference: https://github.com/postcss/autoprefixer-core
* Add vendor prefixes to your css
*/
// NOTE: This is now handled in the `postcss.config.js`
// webpack2 has some issues, making the config file necessary
/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [
new webpack.LoaderOptionsPlugin({
test: /\.scss$/i,
options: {
postcss: {
plugins: [autoprefixer]
}
}
})
];
// Skip rendering index.html in test mode
if (!isTest) {
// Reference: https://github.com/ampedandwired/html-webpack-plugin
// Render index.html
config.plugins.push(
new HtmlWebpackPlugin({
template: './src/public/index.html',
inject: 'body'
}),
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files
// Disabled when in test mode or not in build mode
new ExtractTextPlugin({filename: 'css/[name].css', disable: !isProd, allChunks: true})
)
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
// Dedupe modules in the output
new webpack.optimize.DedupePlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin(),
// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}])
)
}
/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: http://webpack.github.io/docs/webpack-dev-server.html
*/
config.devServer = {
contentBase: './src/public',
stats: 'minimal',
host: '0.0.0.0'
};
return config;
}();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment