example Webpack configs: React runtime & Karma tests

karma-ci.config.js

var webpackModule = require('./webpack.module.js');
var webpackResolve = require('./webpack.resolve.js');

var Webpack = require('webpack');
var RewirePlugin = require("rewire-webpack");

module.exports = function(config) {
  config.set({
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine-ajax', 'jasmine'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,
    reporters: ['dots', 'junit'],
    junitReporter: {
      outputFile: 'test-results.xml'
    },

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    files: [
      'spec/**/*spec.{js,jsx}',
      // each file acts as entry point for the webpack configuration
    ],

    preprocessors: {
      'spec/**/*spec.{js,jsx}': ['webpack']
    },

    webpack: {
      // karma watches the test entry points
      // (you don't need to specify the entry option)
      // webpack watches dependencies

      // webpack configuration
      target: "web",
      debug: true,

      plugins: [
        new RewirePlugin(),
        new Webpack.IgnorePlugin(/^jquery/)
      ],

      // configs shared between environments
      module: webpackModule,
      resolve: webpackResolve
    },

    webpackServer: {
      // webpack-dev-server configuration
      // webpack-dev-middleware configuration
      // i. e.
      noInfo: true
    },

    // the port used by the webpack-dev-server
    // defaults to "config.port" + 1
    webpackPort: 1234

  });
};

karma.config.js

var webpackModule = require('./webpack.module.js');
var webpackResolve = require('./webpack.resolve.js');

var Webpack = require('webpack');
var RewirePlugin = require("rewire-webpack");

module.exports = function(config) {
  config.set({
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine-ajax', 'jasmine'],

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'osx'],


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    files: [
      'spec/**/*spec.{js,jsx}',
      // each file acts as entry point for the webpack configuration
    ],

    preprocessors: {
      'spec/**/*spec.{js,jsx}': ['webpack']
    },

    webpack: {
      // karma watches the test entry points
      // (you don't need to specify the entry option)
      // webpack watches dependencies

      // webpack configuration
      target: "web",
      debug: true,

      plugins: [
        new RewirePlugin(),
        new Webpack.IgnorePlugin(/^jquery/)
      ],

      // configs shared between environments
      module: webpackModule,
      resolve: webpackResolve
    },

    webpackServer: {
      // webpack-dev-server configuration
      // webpack-dev-middleware configuration
      // i. e.
      noInfo: true
    },

    // the port used by the webpack-dev-server
    // defaults to "config.port" + 1
    webpackPort: 1234

  });
};

webpack.config.js

var webpackModule = require('./webpack.module.js');
var webpackResolve = require('./webpack.resolve.js');

var Webpack = require('webpack');

var config = {

  target: "web",
  debug: true,
 
  entry: {
    'app': './source/main.jsx'
  },
 
  output: {
    filename: '[name].bundle.js',
    path: './build'
  },

  plugins: [
    new Webpack.IgnorePlugin(/^jquery/)
  ],
 
  // configs shared between environments
  module: webpackModule,
  resolve: webpackResolve

};

module.exports = config;

webpack.module.js

/*
Common webpack `module` config; common to all environments.
*/
module.exports = {

  loaders: [
    {
      test: /\.jsx$/,
      loader: 'jsx-loader'
    },{
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    },{
      test: /\.less$/,
      loader: 'style-loader!css-loader!less-loader'
    }
  ]

};

webpack.resolve.js

var path = require('path');

/*
Common webpack `resolve` config; common to all environments.
*/
module.exports = {

  alias: {
    "app": path.normalize(__dirname + "/source"),
    "app-spec": path.normalize(__dirname + "/spec")
  },

  extensions: ["", ".webpack.js", ".web.js", ".jsx", ".js", ".less", ".css"]

};