使用Webpack打包Typescript

// webpack.config.js
const path = require('path');
 
module.exports = {
  entry: './src/index.ts', // 项目的入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 打包文件放置的目录
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 正则表达式，匹配.ts或.tsx文件
        use: 'ts-loader', // 使用ts-loader处理TypeScript文件
        exclude: /node_modules/ // 排除node_modules目录
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // 自动解析的文件扩展名
  }
};

这个配置文件定义了Webpack如何处理TypeScript文件。它指定了项目的入口文件为src/index.ts，并定义了输出文件的名字和位置。module.rules部分定义了如何处理TypeScript文件，使用ts-loader来加载和编译TypeScript。resolve.extensions部分确保Webpack可以自动解析 TypeScript 文件的扩展名。