title: Karma + Webpack + sourcemap preprocessor doesn't stop at breakpoints in WebStorm
body: <p>I'm starting a project the <a href="https://github.com/AngularClass/NG6-starter" rel="nofollow noreferrer">NG6-Kit-starter</a>.</p>
  
  <p>I'm using WebStorm.</p>
  
  <p>I want to be able to debug my unit tests using WebStorm, so I followed this <a href="https://www.jetbrains.com/help/webstorm/2016.3/debugging-javascript-unit-tests.html#d42103e129" rel="nofollow noreferrer">tutorial</a>.</p>
  
  <p>I can run unit test from WebStorm but I can't put breakpoints, it never stops at breakpoints and I have don't know why.</p>
  
  <p>I suspect it has to do something with the fact that I'm using a preprocessor in my karma config file.</p>
  
  <pre><code>preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },
  </code></pre>
  
  <p>See below my full karma.config.js</p>
  
  <pre><code>module.exports = function (config) {
    config.set({
      // base path used to resolve all patterns
      basePath: '',
  
      // frameworks to use
      // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
      frameworks: ['mocha', 'sinon-chai'],
  
      // list of files/patterns to load in the browser
      files: [{ pattern: 'spec.bundle.js', watched: false }],
  
      // files to exclude
      exclude: [],
  
      plugins: [
        require("karma-sinon-chai"),
        require("karma-chrome-launcher"),
        require("karma-mocha"),
        require("karma-mocha-reporter"),
        require("karma-sourcemap-loader"),
        require("karma-webpack")
      ],
  
      // preprocess matching files before serving them to the browser
      // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
      preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },
  
      webpack: {
        //devtool: 'inline-source-map',
        devtool: 'source-map',
        module: {
          loaders: [
            { test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
            { test: /\.html$/, loader: 'raw' },
            { test: /\.(scss|sass)$/, loader: 'style!css!sass' },
            { test: /\.css$/, loader: 'style!css' },
            { test: /\.svg/, loader: 'svg-url-loader' },
            { test: /\.json$/, loader: 'json-loader' }
          ]
        }
      },
  
      webpackServer: {
        noInfo: true // prevent console spamming when running in Karma!
      },
  
      // available reporters: https://npmjs.org/browse/keyword/karma-reporter
      reporters: ['mocha'],
  
      // web server port
      port: 9876,
  
      // enable colors in the output
      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_DEBUG,
  
      // toggle whether to watch files and rerun tests upon incurring changes
      autoWatch: false,
  
      // start these browsers
      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      browsers: ['Chrome'],
  
      // if true, Karma runs tests once and exits
      singleRun: true
    });
  };
  </code></pre>
  
  <p>And my spec.bundle.js file:</p>
  
  <pre><code>import angular from 'angular';
  
  import mocks from 'angular-mocks';
  
  let context = require.context('./client/app', true, /\.spec\.js/);
  context.keys().forEach(context);
  </code></pre>
  
  <p><strong>Does anyone know how to make this work with WebStorm in order to be able to put breakpoints in unit tests ?</strong></p>