title: Sourcemap + istanbul/isparta code coverage for a webpack + babel (for es6) + mocha (+karma)
body: <p>I have a test project at <a href="https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage" rel="nofollow noreferrer">https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage</a>.</p>
  
  <p>It consists of two simple source files in <code>src/</code>, one with a deliberate error (<code>src/lib2.js</code>).</p>
  
  <p>I want to webpack and transpile using babel from ES6 to ES5 and run the Mocha tests on this bundle using Karma.</p>
  
  <p>I've already added source mapping and tested this so that I can see the line number of the original file.</p>
  
  <p>For me, the stack trace looks like this:</p>
  
  <pre><code>21 02 2016 16:03:15.445:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
  21 02 2016 16:03:15.451:INFO [launcher]: Starting browser Chrome
  21 02 2016 16:03:16.551:INFO [Chrome 48.0.2564 (Linux 0.0.0)]: Connected on socket /#yRS32ons0_2HGhrwAAAA with id 3072946
  
  START:
    lib1
      ✖ should return 1
  
  Finished in 0.015 secs / 0.001 secs
  
  SUMMARY:
  ✔ 0 tests completed
  ✖ 1 test failed
  
  FAILED TESTS:
    lib1
      ✖ should return 1
        Chrome 48.0.2564 (Linux 0.0.0)
      Error: SIMULATED ERROR
          at foo (/home/danb/projects/so-test-project/tests.webpack.js:135:10 &lt;- webpack:///src/lib2.js:13:8)
          at Context.&lt;anonymous&gt; (/home/danb/projects/so-test-project/tests.webpack.js:93:31 &lt;- webpack:///test/index.js:7:11)
  </code></pre>
  
  <p>On the 2nd last line above, it shows <code>webpack:///src/lib2.js:13</code> which is the correct location in the original source.</p>
  
  <p>To get that mapping, I did this: <a href="https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage/commit/6ea992cae499dccc68488bcb3eaca642ae4ed24e" rel="nofollow noreferrer">https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage/commit/6ea992cae499dccc68488bcb3eaca642ae4ed24e</a></p>
  
  <p>What I want to do is add coverage using something like istanbul (or isparta which uses istanbul) so that I can generate an HTML coverage report in coverage/ that shows me lines that aren't covered (potentially) -- as well as overall coverage percentages.</p>
  
  <p>But I want to ensure that my stack traces are still source mapped correctly like the above.</p>
  
  <p>I've tried isparta-loader and isparta-instrumenter-loader to transpile and instrument the files in question in webpack, but my line numbers are slightly wrong in the stacktrace (above). There seems to be a number of isparta-like things floating around and the documentation is not super-friendly.</p>
  
  <p>To express all of this a bit more generally: I'm bundling files and tests and then testing this in the browser (karma or by more manual means), and I want my source maps (in the browser) to point to the original lines of code and <em>at the same time</em> I want a coverage report to refer to the  original lines and files that haven't been covered.</p>