后缀为ts css html,webpack引入ts后html-webpack-plugin报错

webpack.config.js:const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

const miniCssExtractPlugin = require('mini-css-extract-plugin');

const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const styleLoader = [

{

loader:miniCssExtractPlugin.loader,

options:{

publicPath:'../'

}

},

// 'style-loader',

'css-loader'

]

module.exports = {

entry:'./index.ts',

output:{

path:path.resolve(__dirname,'bundle'),

filename:'bundle.js'

},

module:{

rules:[

{

oneOf:[

{

test:/\.css$/,

use:[

...styleLoader

]

},

{

test:/\.ts$/,

exclude:/node_modules/,

use:[

{

loader:'babel-loader',

options:{

cacheDirectory:true

}

},

'ts-loader'

]

},

{

// * 处理html中的图片资源

test:/\.html/,

loader:'html-loader'

},

{

test:/\.(jpg|jpeg|png|gif)$/,

use:[

'url-loader'

]

}

]

}

]

},

plugins:[

new htmlWebpackPlugin({

template:'./index.html'

}),

new miniCssExtractPlugin({

filename:'css/bundle.css'

}),

new optimizeCssAssetsWebpackPlugin()

],

devServer:{

port:8899,

contentBase:path.resolve(__dirname,'bundle'), // * 监听哪一层目录

hot:true, // * 这个选项开启的话就说明开了了HMR(热模块替换)功能

open:true,

compress:true, // * 一切服务都启用 gzip 压缩：

},

devtool:'cheap-module-source-map',

optimization:{

splitChunks:{

chunks:'all'

}

},

resolve: {

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

},

mode:'development'

}

自从改用了ts后，项目能跑起来，但是报了很多html-webpack-plugin的错误，求解怎么解决