Karma + Webpack (babel-loader) + ES6 "Unexpected token import"
<p><strong>/edit: I stripped the config completely to a minimum demonstrating the problem. I also uploaded a working project to GitHub that you can checkout, so you can see for yourself.</strong></p>

<p>Problematic use case on GitHub: <a href="https://github.com/bbottema/webpack-angular15-es6-karma">webpack-angular15-es6-karma</a> (<a href="https://github.com/bbottema/webpack-angular15-es6-karma/raw/master/webpack-angular15-es6-karma.7z">download 7z archive</a>)</p>

<pre><code>npm install
npm run build
npm run test
</code></pre>

<hr>

<p>I know there are a couple of related questions, but the world is moving so fast and there are so many factors / dependencies that I'm not able to crack this problem with the current proposed solutions.</p>

<p>I have a webpack config that takes care of all my source code and it works great.</p>

<p>For testing, I reuse that config to take care of a single central entry script that loads both the sources and the test files. I could not find another way to import modules from my source code into my test code for testing.</p>

<p><strong>Karma builds fine reusing my webpack config, but the browser reports an error as soon as it is opened.</strong></p>

<p>The source code uses ES6 imports and webpack require statements.</p>

<p><strong>package.json:</strong></p>

<blockquote>
  <p>npm run build >>> webpack --config webpack.config.js --display-error-details --colors --progress</p>
  
  <p>npm run test >>> karma start --single-run --no-auto-watch karma.config.js</p>
</blockquote>

<pre><code>{
  "name": "ProblemDemo",
  "scripts": {
    "build": "rimraf dist &amp;&amp; webpack --config webpack.config.js --display-error-details --colors --progress",
    "test": "karma start --single-run --no-auto-watch karma.config.js"
  },
  "dependencies": {
    "angular": "^1.5.7",
    "angular-filter": "^0.5.8"
  },
  "devDependencies": {
      "webpack": "1.13.1",
      "html-loader": "0.4.3",
      "babel-loader": "5.3.2",
      "html-webpack-plugin": "1.6.1",
      "rimraf": "^2.5.3",
      "run-sequence": "1.1.2",
      "jasmine-core": "^2.4.1",
      "karma": "^0.13.19",
      "karma-chrome-launcher": "^0.2.2",
      "karma-coverage": "^0.5.3",
      "karma-jasmine": "^0.3.6",
      "karma-webpack": "^1.7.0",
      "loader-utils": "^0.2.12"
  }
}
</code></pre>

<p><strong>karma.config.js:</strong></p>

<pre><code>module.exports = function (config) {
    config.set({
        browsers: ['Chrome'],
        coverageReporter: {
            reporters: [
                { type: 'html', subdir: 'html' },
                { type: 'lcovonly', subdir: '.' }
            ]
        },
        files: ['./tests.webpack.js'],
        frameworks: ['jasmine'],
        preprocessors: { './tests.webpack.js': ['webpack'] },
        reporters: ['progress', 'coverage'],
        webpack: configureWebpack()
    });

    function configureWebpack(webpackConfigFunction) {
        var webpackConfig = require('./webpack.config');
        webpackConfig.entry = undefined; // karma will pass the proper argument for entry
        return webpackConfig;
    }
};
</code></pre>

<p>As you can see I'm not using karma-babel plugins: I'm not sure why I would need those, seeing I already have a working build for code with import / require statements.</p>

<p><strong>test_entry.js:</strong></p>

<pre><code>var testsContext = require.context('./test', true, /\.js$/);
testsContext.keys().forEach(testsContext);

var srcContext = require.context('./app', true, /\.js$/);
srcContext.keys().forEach(srcContext);
</code></pre>

<hr>

<p>The webpack build succeeds without a hitch (and emits <em>test_entry.js</em> chunk of expected file size), but then Karma opens Chrome and as soon as the page is loaded I'm greeted with the following error:</p>

<blockquote>
  <p>Chrome 51.0.2704 (Windows 7 0.0.0) ERROR</p>
  
  <p>Uncaught SyntaxError: Unexpected token import</p>
  
  <p>at the_path/test_entry.js:41</p>
</blockquote>

<p><em>test_entry.js</em> doesn't have 41 lines and doesn't contain import statements and anyway they should have been taken care of. What's going wrong?</p>

<p>In case you want to know the webpack config as well:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// webpack.config.js, works perfectly for normal builds but not with Karma
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 debug: true,
 entry: {
  app: ['./app/index.js'],
  vendor: ['./app/vendor.js']
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: 'js/[name].js'
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: './app/index.html',
   inject: 'body',
   minify: false
  }),
  new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.js'),
  new webpack.SourceMapDevToolPlugin({
   filename: '[file].map',
   exclude: /vendor/
  })
 ],
 resolve: {
  extensions: ['', '.js'],
  alias: {
   app: path.join(__dirname, 'app')
  }
 },
 module: {
  loaders: [
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: path.join(__dirname, 'app'),
    exclude: path.join(__dirname, 'node_modules')
   },
   {
    test: /\.html$/,
    loader: 'html-loader'
   }
  ]
 },
 resolveLoader: {
  root: path.join(__dirname, 'node_modules')
 },
};</code></pre>
</div>
</div>
</p>

<p>In case you want to see my test, required by <em>test_entry.js</em>, which I can't get to run:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import jasmine from 'jasmine-core';
import readableNumberFilter from './file_path/readableNumber.filter';

// for some reason needed, or else unexpected token errors during build:
var describe = jasmine.describe;
var it = jasmine.it;
var expect = jasmine.expect;

describe('readableNumber Filter', function () {
 describe('readableNumber Filter formatting', () =&gt; {
  it('it should support optional arguments', function () {
   expect(readableNumberFilter("50.3")).toEqual("50,30");
  });
 });
});</code></pre>
</div>
</div>
</p>

<hr>

<p><strong>edit 20-7-2016</strong></p>

<p>The problem persists with updated babel-loader dependencies as well  (including setting es2015 presets option). "babel-core": "^6.11.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0",</p>