webpack打包ts的配置及踩坑

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

这段代码提供了一个基本的webpack配置，用于打包TypeScript文件。它设置了入口文件、输出文件的路径和名称，以及自动解析的文件扩展名和模块规则。通过使用ts-loader，它允许webpack理解并转换TypeScript文件。这个配置能够帮助开发者在使用webpack打包TypeScript项目时节省时间和精力。