title: Debugging typescript with source maps and webpack
body: <p>I have project written in Typescript and I want to be able to debug it (either in <code>Chrome Dev Tools</code> or in <code>Intellij</code>). </p>
  
  <p>At first I saw that Typescript's <code>import</code> functionality was not supported. So I tried using <code>Webpack</code> along with <code>webpack dev server</code> but this failed completely. Even though my application was working (due to having a single <code>bundle.js</code> file that has all the code) it would be unable to match the code with the given source maps and this making debugging impossible.</p>
  
  <p>After I stopped using webpack I tried adding <code>require.js</code> as a dependency to resolve the <code>require is not defined</code> error I was getting. That worked but now I'm stuck again and getting this:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: exports is not defined</p>
  </blockquote>
  
  <p>I have no idea why this isn't working. I want to be make my application work (either through webpack or being able to resolve import statements after transpilation) and still be able to debug the code using the typescript-produced source-maps. How can I achieve this?</p>
  
  <p>I'm attaching my config files in case there is something missing there:</p>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      "sourceMap": true
    },
    "include": [
      "scripts/**/*"
    ],
    "exclude": [
      "node_modules"
    ]
  }
  </code></pre>
  
  <p>webpack.config.js:</p>
  
  <pre><code>module.exports = {
      resolve: {
          extensions: [/*'.ts', '.tsx', */'.js']
      },
      entry: './scripts/main.js',
      output: {
          path: '/',
          filename: 'app.js'
      },
      module: {
          rules: [
              { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' }
          ],
          loaders: [
              { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
              {test: /\.css$/, loader: "style!css"}
          ]
      },
      watch: true
  };
  </code></pre>