karma.conf.js

const withCoverage = process.env.COVERAGE === 'true'
const webpackConfig = require('./webpack.config')

module.exports = (config) => {
  const baseConfig = {
    basePath: 'src',
    files: [
      'test-index.js'
    ],

    // The `src/` isn't needed since webpack config root is at src.
    preprocessors: {
      '**/test-index.js': ['webpack', 'sourcemap'],
    },

    webpack: Object.assign(webpackConfig, {
      node: {
        fs: 'empty'
      },
      entry: {},
      watch: true,
    }),
    webpackServer: {
      // noInfo: true
    },

    frameworks: ['tap'],
    reporters: ['tape'],
    browsers: ['Chrome'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    singleRun: true
  }

  config.set(Object.assign(baseConfig, withCoverage
    ? {
      coverageReporter: {
        dir: 'coverage',
        reporters: [
          {
            type: 'html',
            subdir: 'report-html'
          }, {
            type: 'lcov',
            subdir: 'report-lcov'
          }, {
            type: 'text-summary',
            file: 'text-summary.txt'
          }
        ]
      },
      reporters: [
        ...baseConfig.reporters,
        'coverage'
      ]
    }
    : {}))
}

webpack.config.js

const SRC_FOLDER = 'src'
const DIST_FOLDER = 'public'

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanPlugin = require('clean-webpack-plugin')
const autoprefixer = require('autoprefixer')
const srcPath = path.join(__dirname, SRC_FOLDER)
const distPath = path.join(__dirname, DIST_FOLDER)
const exclude = [/node_modules/]

const extractVendorCss = new ExtractTextPlugin('vendor-[contenthash].css', { allChunks: true })
const extractSass = new ExtractTextPlugin('styles-[contenthash].css', { allChunks: true })

module.exports = {

  // The base directory for resolving `entry` (must be absolute path)
  context: srcPath,

  entry: {
    app: 'app.js',
    vendor: ['react']
  },

  output: {
    path: distPath,
    publicPath: '/',
    filename: 'bundle.[hash].js'
  },

  plugins: [
    // Inject webpack output to entry html (based on index.html)
    new HtmlWebpackPlugin({filename: 'index.html', template: 'index-template.html'}),

    // Remove build related folders.
    new CleanPlugin([DIST_FOLDER]),

    // Do not output to DIST_FOLDER if there are errors
    new webpack.NoErrorsPlugin(),

    // Pass environment variables
    new webpack.DefinePlugin({
      __ENVIRONMENT__: JSON.stringify(process.env.NODE_ENV)
    }),

    // Order matters for HtmlWebpackPlugin! Firstly, inject vendor, then inject custom styles.
    extractVendorCss,
    extractSass,

    // Disable vendor chunks in test env
    ...(
      process.env.NODE_ENV !== 'test'
        ? [new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.[hash].js')]
        : []
    ),

    ...(
      process.env.NODE_ENV === 'production'
        ? [
          new webpack.optimize.DedupePlugin(),
          new webpack.optimize.UglifyJsPlugin({
            compress: {
              screw_ie8: true,
              warnings: false,
            },
          }),
          new webpack.optimize.AggressiveMergingPlugin(),
        ]
        : []
    ),
  ],

  // Enable loading modules with base from src/ folder
  resolve: {
    extensions: ['', '.js'],
    root: [srcPath]
  },

  module: {
    loaders: [
      // JS (w/ hot loading)
      {
        test: /\.js$/,
        loaders: [
          ...(process.env.NODE_ENV === 'development' ? ['react-hot'] : []),
          'babel'
        ],
        exclude
      },

      // SCSS
      {
        test: /\.(scss)$/,
        loader: extractSass.extract('style', ['css', 'postcss', `sass?includePaths[]=${srcPath}`].join('?'))
      },

      // CSS
      {
        test: /\.(css)$/,
        loader: extractVendorCss.extract('style', ['css', 'postcss'].join('?'))
      },

      // JSON
      {
        test: /\.json$/,
        loader: 'json',
        exclude
      },

      // Image/font files (also when included in CSS)
      // Inline as Base64 data URI (<5kb), otherwise use `file-loader`
      {
        test: /\.(eot|woff2?|ttf|otf)(\?.*)?$/i,
        loader: 'url?limit=5120&name=[path][name].[hash].[ext]'
      }, {
        test: /\.(jpe?g|png|gif|svg)(\?.*)?$/i,
        loader: 'url?limit=5120&name=[path][name].[hash].[ext]'
      },

      // Expose React as global object
      {
        test: require.resolve('react'),
        loader: 'expose?React'
      },

    ]
  },

  postcss: [
    autoprefixer({
      browsers: ['last 2 versions']
    })
  ],

  // Settings for webpack-dev-server (hot and progress from CLI)
  devServer: {
    contentBase: './src',
    colors: true,
    noInfo: true,
    inline: true,
    historyApiFallback: true
  },

  devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-eval-source-map' : ''
}