title: Webpack + React + Typescript
body: <p>Is it possible to use webpack with React and Typescript and be able to bundle those into a web bundle, but still be able to debug original TypeScript and React code? In webpack I'm using ts-loader and ts-jsx-loader plus devtool: "source-map", but when I try to do browser debugging, I can't see original ts code but instead I see code which has been changed by webpack.</p>
  
  <p>My current basic webpack.config.js file:</p>
  
  <pre><code>var webpack = require('webpack');
  module.exports = {
    entry: ['./app/main.ts'],
    output: {
      path: './build',
      filename: 'bundle.js'
    },
    debug: true,
    devtool: 'source-map',
    plugins: [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin()
    ],
    resolve: {
      extensions: ['', '.ts', '.js']
    },
    module: {
      loaders: [
        {
          test: /\.ts$/,
          loader: 'ts-loader!ts-jsx-loader'
        }
      ]
    }
  };
  </code></pre>
  
  <p>tsconfig.json:</p>
  
  <pre><code>{
      "compileOnSave": false,
      "version": "1.5.0-alpha",
      "compilerOptions": {
          "target": "es5",
          "module": "commonjs",
          "noLib": false,
          "sourceMap": true,
          "noImplicitAny": true,
          "removeComments": true
      },
      "files": [
          "./AppComponent.ts",
          "./libs/jsx.d.ts",
          "./libs/react.d.ts",
          "./libs/webpack-runtime.d.ts",
          "./main.ts"
      ]
  }
  </code></pre>
  
  <p>For example - my oryginal .ts file looks like:</p>
  
  <pre><code>import React = require('react');
  
  class AppComponent extends React.Component&lt;any, any&gt; {
    render () {
      return React.jsx(`
        &lt;h1&gt;He world!&lt;/h1&gt;
      `);
    }
  };
  export = AppComponent;
  </code></pre>
  
  <p>and in chrome debugger it looks like this:</p>
  
  <pre><code>var __extends = this.__extends || function (d, b) {
      for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
      function __() { this.constructor = d; }
      __.prototype = b.prototype;
      d.prototype = new __();
  };
  var React = __webpack_require__(2);
  var AppComponent = (function (_super) {
      __extends(AppComponent, _super);
      function AppComponent() {
          _super.apply(this, arguments);
      }
      AppComponent.prototype.render = function () {
          return (React.createElement("h1", null, "He world!"));
      };
      return AppComponent;
  })(React.Component);
  ;
  module.exports = AppComponent;
  
  
  /*****************
   ** WEBPACK FOOTER
   ** ./app/AppComponent.ts
   ** module id = 158
   ** module chunks = 0
   **/
  </code></pre>