webpack引入ts后html-webpack-plugin报错

Question

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的错误，求解怎么解决

Answer 1

修改tsconfig.json可解决：

{
    "compilerOptions": {
        "module": "es6",
        "target": "es2015",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "allowJs":true
    },
    "include": [
        "js/"
    ],
    "exclude": [
        "node_modules",
    ]
}

Answer 2

tsconfig.json中加上

"include": [
    "TS文件所在的文件夹/"
]