how to use webpack-dev-middleware with typescript?

Question

I'm trying to implement a simple backend app with express + webpack + babel + typescript, I've seen examples of webpack-dev-middleware where the start script is simply "node index.js", as I understand it, an in-memory server is created with your express application. But how can I implement it using typescript? One possible solution I saw is to use ts-node to run it, but wouldn't that defeat the purpose of using the babel transpilation? am I getting something wrong? here is my index.ts

import express from 'express';
import { webpack } from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';

const config = require('../webpack/webpack.dev.js');

const compiler = webpack(config);

const app = express();

app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

app.listen(3000, () => {
  console.log('listening...');
});

Thanks in advance!