webpack4系列教程，如何处理typescript文件？

npm i typescript -g

npm i ts-loader -D

module.exports = {
    mode: 'production', // 环境
    entry: {
        //...
    },
    resolve: {   // 需要打包的文件后缀
        extensions: [".tsx", ".ts", ".js"]
    },
    //...
}

module.exports = {
    mode: 'production', // 环境
    module: {
        rules: [{
                test: /\.tsx?$/,
                use: {
                    loader: 'ts-loader',
                }
            },
            //...
        ]
    }
    //...
}

{
    "compilerOptions": {
        "module": "commonjs",
        "outDir": "./dist/",
        "target": "es5",
        "allowJs": true,
        "sourceMap":true, // 输出 Source Map 方便调试
        "importHelpers":true // 减少代码的冗余，类似：@babel/plugin-transform-runtime
    },
    "include": [
        "./src/*"
    ],
    "exclude": [
        "./node_modules"  
    ]
}

tsc -init

npx tsc -init

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

function greeter(person: string) {
    return "Hello, " + person;
}
let user = "sunan";
document.body.innerHTML = greeter(user);

module.exports = {
    mode: 'production', // 环境
    entry: {
        //...
        ts: './src/ts.ts',
    },
}