title: webpack-hot-middleware webpack express typescript
body: <p>I'm trying to set up webpack-hot-middleware on my node api 
  but when I made a change on welcome.controller.ts, the console shows the build process but I can't see the changes, what I'm missing?, I'm using typescript and webpack, here is my setup:</p>
  
  <p>Webpack.config.js</p>
  
  <pre><code>var fs = require('fs');
  var webpack = require('webpack');
  var path = require("path");
  var nodeModules = {};
  fs.readdirSync('node_modules')
  .filter(function (x) {
      return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function (mod) {
      nodeModules[mod] = 'commonjs ' + mod;
  });
  
  module.exports = {
  entry: [
      'webpack-hot-middleware/client?
  path=http://localhost:3000/__webpack_hmr&amp;reload=true',
      './src/server'
  ],
  output: {
      path:  __dirname + '/dist',
      filename: 'server.js',
      publicPath: '/'
  },
  devServer: {
      contentBase: './src'
    },
  node: {
      __dirname: false,
      __filename: false
  },
  resolve: {
      // Add '.ts' and '.tsx' as a resolvable extension.
      extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
  },
  devtool: '#source-map',
  
  plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
  ],
  module: {
      loaders: [
          // All files with a '.ts' or '.tsx'
          // extension will be handled by 'ts-loader'
          {
              test: /\.tsx?$/,
              loader: 'ts-loader',
          },
      ],
  },
  target: 'node',
  externals: nodeModules
  };
  </code></pre>
  
  <p>server.ts</p>
  
  <pre><code>import * as express from 'express';
  import * as webpack from 'webpack';
  import * as webpackDevMiddleware from  'webpack-dev-middleware';
  import * as webpackHotMiddleware from 'webpack-hot-middleware';
  import * as dotenv from 'dotenv';
  import * as bodyParser from 'body-parser';
  import * as config from '../webpack.config';
  import * as welcomeController from './controllers/welcome.controller';
  import * as path from 'path'
  dotenv.config();
  
  const compiler = webpack(config);
  const app = express();
  
  
  app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.path,
    stats: {colors: true},
    noInfo: true
  }));
  
  app.use(webpackHotMiddleware(compiler,  {
    log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000
  }));
  
  
  app.set('port', process.env.PORT || 3000);
  app.use(bodyParser.json());
  app.use('/', express.static(path.join(__dirname, "/dist")));
  app.use(bodyParser.urlencoded({ extended: true }));
  app.get('/', welcomeController.index);
  
  app.listen(app.get('port'), () =&gt; {
    console.log(('App is running at http://localhost:%d in %s mode'),
      app.get('port'), app.get('env'));
    console.log('Press CTRL-C to stop\n');
  });
  
  if (module.hot) {
    module.hot.accept('./server', () =&gt; {
     console.log('si')
    });
  }
  
  module.exports = app;
  </code></pre>
  
  <p>welcome.controller.ts</p>
  
  <pre><code>import { Request, Response } from 'express';
  let pkg = require(__dirname + '/../../package.json');
  
  export let index = (req: Request, res: Response) =&gt; {
    res.json({
      message: 'Welcome to API sekeleton.',
      version: pkg.version,
    });
  }
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "projectq",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "build": "webpack --config webpack.config.js",
      "start": "npm run build &amp;&amp; node ./dist/server.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "dotenv": "^5.0.0",
      "express": "^4.16.2",
      "ts-loader": "^3.5.0",
      "typescript": "^2.7.1",
      "typings": "^2.1.1",
      "webpack": "^3.11.0",
      "webpack-dev-middleware": "^2.0.5",
      "webpack-dev-server": "^2.11.1",
      "webpack-hot-middleware": "^2.21.0"
    }
  }
  </code></pre>