一、ts-loader

ts-loader 是官方标准的 TypeScript 加载器，核心作用是将 TypeScript(ES6+) 编译为 JavaScript(ES6+)。

⚠️ 注意：

• TypeScript 本身不提供 Polyfills 兼容低版本浏览器
• 若需要编译为 ES5，必须配合 babel-loader 使用

Webpack 基础配置

javascript复制
module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              // 自定义配置
            }
          }
        ]
      }
    ]
  }
}

---

二、awesome-typescript-loader

awesome-typescript-loader 是第三方优化版 TS 加载器，编译速度优于 ts-loader，无需额外独立插件。

Webpack 基础配置

javascript复制
module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'awesome-typescript-loader'
          }
        ]
      }
    ]
  }
}

---

三、推荐方案：babel-loader 处理 TypeScript

目前更推荐使用 babel-loader 替代上述两种 TS 专用加载器，优势显著：

1. 缓存机制 + 单文件架构：编译速度更快
2. 预编译模式：Babel 先直接剥离 TypeScript 类型语法，不做类型检查；项目启动后再单独进行类型校验
3. 原生支持 Polyfill：无需依赖 TS 处理兼容，Babel 可直接编译为 ES5

推荐 Webpack 配置

javascript复制
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              "@babel/preset-react",
              "@babel/preset-typescript"
            ]
          }
        }
      }
    ]
  }
}

---

四、依赖版本参考（生产可用）

json复制
{
  "@babel/core": "^7.18.10",
  "@babel/plugin-proposal-class-properties": "^7.17.12",
  "@babel/plugin-transform-runtime": "^7.18.5",
  "@babel/preset-env": "^7.18.2",
  "@babel/preset-react": "^7.17.12",
  "@babel/preset-typescript": "^7.18.6",
  "@babel/runtime-corejs2": "^7.18.3",
  "@types/react-transition-group": "^4.4.5"
}