webpack-hot-middleware webpack express typescript - node.js

Question

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:
Webpack.config.js
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&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
};
server.ts
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'), () => {
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', () => {
console.log('si')
});
}
module.exports = app;
welcome.controller.ts
import { Request, Response } from 'express';
let pkg = require(__dirname + '/../../package.json');
export let index = (req: Request, res: Response) => {
res.json({
message: 'Welcome to API sekeleton.',
version: pkg.version,
});
}
package.json
{
"name": "projectq",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "npm run build && 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"
}
}