title: Debugging with webpack, ES6 and Babel
body: <p>This seems like something that should have been relatively simple to achieve, but alas.</p>
  
  <p>I have ES6 class:</p>
  
  <pre><code>'use strict';
  
  export class BaseModel {  
      constructor(options) {
          console.log(options);
      }
  };
  </code></pre>
  
  <p>and root module that uses it:</p>
  
  <pre><code>'use strict';
  
  import {BaseModel} from './base/model.js';
  
  export let init = function init() {
      console.log('In Bundle');
      new BaseModel({a: 30});    
  };
  </code></pre>
  
  <p><strong>My target is:</strong></p>
  
  <ol>
  <li>pass the above through Babel, to get ES5 code</li>
  <li>pack the modules with webpack</li>
  <li><strong>be able to debug the result</strong></li>
  </ol>
  
  <p>After some trial, this is the webpack config that I have:</p>
  
  <pre><code>{
      entry: {
          app: PATH.resolve(__dirname, 'src/bundle.js'),
      },
      output: {
          path: PATH.resolve(__dirname, 'public/js'),
          filename: 'bundle.js'
      },        
      devtool: 'inline-source-map',
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  exclude: /(node_modules|bower_components)/,
                  loader: 'babel'
              }
          ]        
      }
  }
  </code></pre>
  
  <p>This seems to be working, to an extent.</p>
  
  <p>So, I can do that:</p>
  
  <p><a href="https://i.stack.imgur.com/7uoqi.png"><img src="https://i.stack.imgur.com/7uoqi.png" alt="devtools breakpoint screenshot"></a></p>
  
  <p>I can click F11 and enter the code, but I can't evaluate <code>BaseModel</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/c0OqD.png"><img src="https://i.stack.imgur.com/c0OqD.png" alt="erro in console evaluation"></a></p>
  
  <p>which kinda defeats the purpose (or one of purposes) of debugging.</p>
  
  <p><strong>I've tried</strong> adding <code>source-map-loader</code> in various order with <code>babel-loader</code>:</p>
  
  <pre><code>{
      test: /\.js$/,
      loader: "source-map-loader"
  }
  </code></pre>
  
  <p>to no avail.</p>
  
  <p><em>Side note 1</em>: if I abandon webpack and just compile my modules with source maps via Babel into, say, System.js:</p>
  
  <pre><code>babel src/ --out-dir public/js/ --debug --source-maps inline --modules system
  </code></pre>
  
  <ul>
  <li>all works properly.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/3OwzH.png"><img src="https://i.stack.imgur.com/3OwzH.png" alt="enter image description here"></a></p>
  
  <p><em>Side note 2</em>: this <code>?sourceMaps=true</code> doesn't seem to do anything at all, since, if I remove source map configuration from webpack - no source maps are preserved/generated at all. One would expect the initial, Babel-produced, source maps to be preserved in the resulting files. Nope.</p>
  
  <p><strong>Any suggestions would be greatly appreciated</strong></p>