html页面引入ts文件,html中引入ts，使用webpack如何正确配置？

目的：html多文件中script引入ts文件，然后通过webpack服务运行起来。

部分代码：

index.html

index.ts

console.log(document.getElementById('app'))

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

entry:{

index:'./src/index.ts'

},

output: {

filename: './src/[name].js'

},

resolve: {

extensions: ['.ts', '.tsx', '.js']

},

module: {

rules: [

{ test: /.tsx?$/, loader: 'ts-loader' }

]

},

devServer:{

contentBase: "./src",

stats: "errors-only",

compress: false,

host: "localhost",

port: 9000,

watchContentBase: true

},

plugins:[

new HtmlWebpackPlugin({

template: "./src/index.html"

}),

new HtmlWebpackPlugin({

template: "./src/home.html"

})

]

}

目前写成这样了，运行是entry入口配置的js和index.html。怎么样可以让script src的ts生效。