title: ES6 module import is not defined during debugger
body: <p>While playing around with Babel and Webpack I stumbled into some really weird behavior today. </p>
  
  <p>I threw a debugger in my  <code>main.js</code> to see if I was importing correctly, but Chrome's console kept yelling that the module I was trying to import was not defined. I try console logging the same module instead, and I see it printed to my console.</p>
  
  <p>What gives? I've pasted the relevant code snippets below:</p>
  
  <p><code>main.js</code></p>
  
  <pre><code>import Thing from './Thing.js';
  
  debugger // if you type Thing into the console, it is not defined
  
  console.log(new Thing()); // if you let the script finish running, this works
  </code></pre>
  
  <p><code>thing.js</code></p>
  
  <pre><code>class Thing {
  }
  
  export default Thing;
  </code></pre>
  
  <p><code>webpack.config.js</code></p>
  
  <pre><code>var path = require('path');
  module.exports = {
      entry: './js/main.js',
      output: {
          path: __dirname,
          filename: 'bundle.js'
      },
      module: {
          loaders: [
              { test: path.join(__dirname, 'js'), loader: 'babel-loader' }
          ]
      }
  };
  </code></pre>