title: How to bundle typescript with webpack?
body: <p>I'm new to webpack.
  i want to bundle my project which is written in typescript but the destination file has the same codes of typescript which are not readable by browser so what is the messing step in my configuration bellow?
  The project works fine using script tags in html but i need to make them as bundle and make minified file after that.</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "filemanager",
    "version": "1.0.0",
    "description": "controls files using http for web hosting that has no FTP protocol.",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "devDependencies": {
      "ts-loader": "^2.1.0",
      "typescript": "^2.3.4",
      "webpack": "^1.15.0"
    }
  }
  </code></pre>
  
  <p><strong>tsconfig.json</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      "sourceMap": true
    },
    "files": [
          "./ts/app.ts"
      ]
  }
  </code></pre>
  
  <p><strong>wepback.config.js</strong></p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  module.exports={
      devtool: "source-map",
      entry: './ts/app.ts',
      output:{
          path: './build',
          filename: 'app.bundle.js'
      },
      rules:[{
          test: /\.tsx?$/,
          include: path.resolve(__dirname, "ts/"),
          loader: "ts-loader",
          exclude: /node_modules/,
      }],
      resolve:{
          extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
      },
      // watch: true
  }
  </code></pre>
  
  <p>my app path is <strong>./ts/app.ts</strong></p>
  
  <pre><code>import { controler } from './control'; // error stop here "Uncaught SyntaxError: Unexpected token import"
  import { Injector }  from './Injector'; 
  
  window.onload = ()=&gt;{
      var DI = new Injector;
      DI.process(controler);
  }
  </code></pre>
  
  <p><strong>Injector.ts</strong></p>
  
  <pre><code>export class Injector{
  
      private dependencies = {};
      process(target){
          let mainFun = null,
              // tmpFun = ()=&gt;{},
              // FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m,
              // FN_ARG_SPLIT = /,/,
              // FN_ARG = /^\s*(_?)(\S+?)\1\s*$/,
              // STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg,
              // text = target[2].toString(),
              // args = text.match(FN_ARGS)[1].replace(/\s/g, '').split(',');
              args = [];
  
          for(let key in target){
              if(typeof target[key] != 'function'){
                  args.push(target[key]);
              }else{
                  mainFun = target[key];
                  break;
              }
          }
          // console.log(args, mainFun);
  
          // tmpFun.prototype = mainFun.prototype;
          // var instance = new tmpFun();
          // console.log(tmpFun.prototype);
  
          mainFun.prototype.constructor.apply(mainFun.prototype, this.getDependencies(args) );
          // return instance;
      }
      getDependencies(arr){        
          return arr.map( (value)=&gt;{
              return this.dependencies[value];
          });            
      }
      register(name, dependency){
          this.dependencies[name] = new dependency;
      }
  
  };
  </code></pre>
  
  <p><strong>control.ts</strong></p>
  
  <pre><code>declare var $: any;
  declare var Promise: any;
  export let controler = ['IMModel','IMView',class IMControl{
      private im_model        : any;
      private im_view         : any;
      private wh              : number;       // save document height;
      private ww              : number;       // save document width;
      private siteMap         = $('.aside');
      private nextContainer   : any;          // store the next container for the new directories
      public loadedPaths      = [];           // used to store all directories in aside menu to save repated requests
      public loadedFiles      = [];           // used to store all files to save repated requests
      private currentPath     = null          // used to store current path for upload new files in a specific directory
      private currentItem     = null          // used to store current item to be ready with any selection choices
      private searchResult    = [];
      private pathNavigator   = $('.navbar .path');
      private filesList       = $('.explorer .filesList');
      private isUploading     : boolean = false;
      private isAJAXFinished  : boolean = true; // This is used to hold any action till response come back.
      private newRequestReady : boolean = true; // This is used to check if the are more files to be loaded from the server otherwise it will be false.
      private items           = [];
      private itemsIterations = 0;
      private page            = 1;
      private defaultPath  : any = [{
                                          type: 'folder',
                                          name: 'Root',
                                          path: './img',
                                          ext: 'folder',
                                          chuldren: null
                                      }];
      private filesTypeMap    = { 'avi'       :'&lt;i class="fa fa-file-video-o" aria-hidden="true"&gt;&lt;/i&gt;',
                                  'php'       :'&lt;i class="fa fa-file-code-o" aria-hidden="true"&gt;&lt;/i&gt;',
                                  'mkv'       : '&lt;i class="fa fa-video-camera" aria-hidden="true"&gt;&lt;/i&gt;',
                                  'mp4'       : '&lt;i class="fa fa-video-camera" aria-hidden="true"&gt;&lt;/i&gt;',
                                  'folder'    : '&lt;i class="fa fa-folder" aria-hidden="true"&gt;&lt;/i&gt;',
                                  'default'   : '&lt;i class="fa fa-file" aria-hidden="true"&gt;&lt;/i&gt;'   };
      constructor(IMModel, IMView){
          this.im_model       = IMModel;
          this.im_view        = IMView;
          this.onInit();
      }
      // rest of the code
  }];
  </code></pre>