title: Webpack and Typescript bundle.js not running
body: <p>When I click the button I get the following error:</p>
  
  <p><strong><em>index.html:12 Uncaught ReferenceError: greet is not defined
      at HTMLButtonElement.onclick (index.html:12)</em></strong></p>
  
  <p>It seems as if the javascript code generated by webpack or ts-loader is not correct. Any ideas?</p>
  
  <p><strong>this is my index.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function greet(){
      let p:HTMLElement=document.getElementById("p1")
      p.innerHTML="hello"
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>this is my bundle.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/******/ (function(modules) { // webpackBootstrap
  /******/  // The module cache
  /******/  var installedModules = {};
  /******/
  /******/  // The require function
  /******/  function __webpack_require__(moduleId) {
  /******/
  /******/   // Check if module is in cache
  /******/   if(installedModules[moduleId]) {
  /******/    return installedModules[moduleId].exports;
  /******/   }
  /******/   // Create a new module (and put it into the cache)
  /******/   var module = installedModules[moduleId] = {
  /******/    i: moduleId,
  /******/    l: false,
  /******/    exports: {}
  /******/   };
  /******/
  /******/   // Execute the module function
  /******/   modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  /******/
  /******/   // Flag the module as loaded
  /******/   module.l = true;
  /******/
  /******/   // Return the exports of the module
  /******/   return module.exports;
  /******/  }
  /******/
  /******/
  /******/  // expose the modules object (__webpack_modules__)
  /******/  __webpack_require__.m = modules;
  /******/
  /******/  // expose the module cache
  /******/  __webpack_require__.c = installedModules;
  /******/
  /******/  // define getter function for harmony exports
  /******/  __webpack_require__.d = function(exports, name, getter) {
  /******/   if(!__webpack_require__.o(exports, name)) {
  /******/    Object.defineProperty(exports, name, {
  /******/     configurable: false,
  /******/     enumerable: true,
  /******/     get: getter
  /******/    });
  /******/   }
  /******/  };
  /******/
  /******/  // define __esModule on exports
  /******/  __webpack_require__.r = function(exports) {
  /******/   Object.defineProperty(exports, '__esModule', { value: true });
  /******/  };
  /******/
  /******/  // getDefaultExport function for compatibility with non-harmony modules
  /******/  __webpack_require__.n = function(module) {
  /******/   var getter = module &amp;&amp; module.__esModule ?
  /******/    function getDefault() { return module['default']; } :
  /******/    function getModuleExports() { return module; };
  /******/   __webpack_require__.d(getter, 'a', getter);
  /******/   return getter;
  /******/  };
  /******/
  /******/  // Object.prototype.hasOwnProperty.call
  /******/  __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  /******/
  /******/  // __webpack_public_path__
  /******/  __webpack_require__.p = "";
  /******/
  /******/
  /******/  // Load entry module and return exports
  /******/  return __webpack_require__(__webpack_require__.s = "./src/index.ts");
  /******/ })
  /************************************************************************/
  /******/ ({
  
  /***/ "./src/index.ts":
  /*!**********************!*\
    !*** ./src/index.ts ***!
    \**********************/
  /*! no static exports found */
  /***/ (function(module, exports) {
  
  eval("function greet() {\r\n    var p = document.getElementById(\"p1\");\r\n    p.innerHTML = \"hello\";\r\n}\r\n\n\n//# sourceURL=webpack:///./src/index.ts?");
  
  /***/ })
  
  /******/ });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>this is my index.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;script src="./bundle.js"&gt;&lt;/script&gt;
  &lt;body&gt;
      &lt;p id="p1"&gt;&lt;/p&gt;
      &lt;button onclick="greet()"&gt;Greet &lt;/button&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>this is my tsconfig.json</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "compilerOptions": {
      "outDir": "./dist/",
      "noImplicitAny": true,
      "module": "es6",
      "target": "es5",
      "jsx": "react",
      "allowJs": true
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>this is my webpack.config.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require('path');
  
  module.exports = {
    entry: './src/index.ts',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    mode:"development"
  };</code></pre>
  </div>
  </div>
  </p>