problem with webpack-hot-middleware

app.ts

import express from 'express';
import webpack from 'webpack';
import webpackConfig from '../webpack.config.js';
import * as webpackDevMiddleware from 'webpack-dev-middleware';
import * as webpackHotMiddleware from 'webpack-hot-middleware';

const app = express();
const port = 8080; // default port to listen
const compiler = webpack(webpackConfig as any);

// define a route handler for the default home page

app.use(
	webpackDevMiddleware(compiler, {
		noInfo: true,
		publicPath: webpackConfig.output.publicPath,
		writeToDisk: true,
		hot: true,
		stats: { colors: true },
	})
);
app.use(
	webpackHotMiddleware(compiler, {
		log: console.log,
	})
);

app.get('/', (req, res) => {
	res.send('Hello world!!!!');
});
// start the Express server
app.listen(port, () => {
	console.log(`server started at http://localhost:${port}`);
});