安装ts

npm i typescript ts-loader 

配置tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react-jsx",
    "allowJs": true,
    "moduleResolution": "node",
    "baseUrl": "./", // 设置项目根目录为基础路径
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const dirname = __dirname.replace('build','');

module.exports = {
    entry: path.resolve(dirname, 'src/main.jsx'),
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(dirname, 'dist'),
        clean: true,
        publicPath: '/'
    },
    resolve: {
        alias: {
            '@': path.join(dirname, 'src'),
        },
        //import后缀引用简写
        extensions: ['.tsx','.jsx','.ts','.js'],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.jsx?$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            babelrc: false,
                            presets: [
                                [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
                                [require.resolve('@babel/preset-env'), { modules: false }],
                            ]
                        }
                    }
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.(png|jpe?g|gif|mp3|svg)$/,
                type: 'asset/resource'
            }

        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(dirname, 'public/index.html')
        })
    ]
};

解决报错

npm i @types/react