title: how to make webpack typescript react webpack-dev-server configuration for auto building and reloading page
body: <p>My intention is to have such directory structure:</p>
  
  <pre><code>- /my-project/
    -- /src/ (here are all .tsx files located)
    -- /dist/
       - index.html
       - /build/
          -bundle.js
  
   -- /node_modules/
   -- package.json
   -- tsconfig.json
   -- webpack.config.js
  </code></pre>
  
  <p>So, I want to have my index.html which is made manually in the /dist subdirectory and inside of it I want to have /build subdir where the app.js made by webpack goes.</p>
  
  <p>And I want when I'm saving some .tsx file located in my /src dir webpack automatically rebuild app.js and webpack-dev-server automatically reflect the changes.</p>
  
  <p>My <code>package.json</code> looks like this:</p>
  
  <pre><code>{
    "name": "my-project",
    "version": "1.0.0",
    "description": "My first React App",
    "main": "index.js",
    "scripts": {
      "start": "webpack-dev-server --content-base ./dist --hot --inline --colors --port 3000 --open",
      "build": "webpack --config webpack.config.js --watch",
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "keywords": [],
    "author": "AndreyKo",
    "license": "ISC",
    "devDependencies": {
      "@types/react": "^0.14.54",
      "@types/react-dom": "^0.14.19",
      "jquery": "^3.1.1",
      "source-map-loader": "^0.1.5",
      "ts-loader": "^1.3.0",
      "typescript": "^2.1.4",
      "webpack": "^1.14.0",
      "webpack-dev-server": "^1.16.2"
    },
    "dependencies": {
      "react": "^15.4.1",
      "react-dom": "^15.4.1"
    }
  }
  </code></pre>
  
  <p>My <code>webpack.config.js</code>:</p>
  
  <pre><code>module.exports = {
      entry: "./src/index.tsx",
      output: {
          filename: "app.js",
          publicPath: "/dist/",
          path: "./dist/build/"
      },
      dev_tool: "source-map",
      resolve: {
          extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
      },
      module: {
          loaders: [
              {test: /\.tsx?$/, loader: 'ts-loader'}
          ],
          preloaders: [
              {test: /\.js$/, loader: 'source-map-loader'}
          ]
      }
  }
  </code></pre>
  
  <p>My <code>index.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;body&gt;
          &lt;div id="app-container"&gt;&lt;/div&gt;
      &lt;/body&gt;
      &lt;script src="./build/app.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my <code>index.tsx</code> file looks like this:</p>
  
  <pre><code>import * as jQuery from 'jquery';
  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  
  function appOutput() {
      ReactDOM.render(&lt;div&gt;Hello, we are talking from React!&lt;/div&gt;, document.getElementById("app-container"));
  }
  appOutput();
  </code></pre>
  
  <p>I've done commands to the terminal: </p>
  
  <pre><code>npm run build
  npm run start
  </code></pre>
  
  <p>So the app.js was created and webpack-dev-server started working and opened page in the browser. Everything goes fine by far. But when I change the text in my index.tsx and save this file nothing changes, I tried to refresh the browser page, the text remains the same and app.js is not rebuilt.
  To make the text change I have to rebuild app.js with webpack by hand again from the terminal by issuing "npm run build". </p>
  
  <p>How to improve my workflow to make the changes in my /src folder be reflected automatically in my dist/build/app.js file without having to manually rebuild it?</p>