核心目标是语法剥离与降级而非类型检查：babel-loader 通过 @babel/preset-typescript 剥离类型注解，再由 @babel/preset-env 按 browserslist 降级语法并按需注入 polyfill，跳过类型检查，构建更快。
Webpack 中用 babel-loader 处理 TypeScript 文件，核心目标不是类型检查，而是把 TypeScript 编译后的 JS（含 ES2020+ 语法、可选链、空值合并等）进一步降级为兼容目标环境的代码。它跳过 TS 类型系统，只做语法剥离 + 语法转译，适合构建速度优先、类型检查交给 IDE 或独立进程的场景。
基础配置：只用 babel-loader 处理 .ts/.tsx
无需 ts-loader，直接让 babel-loader 接管 TS 文件：
- 安装必要依赖：
npm i -D @babel/core @babel/preset-env @babel/preset-typescript - 在
webpack.config.js的 rules 中添加：module: { rules: [{ test: /\.tsx?$/, use: 'babel-loader', exclude: /node_modules/ }] } - 确保
resolve.extensions包含'.ts'和'.tsx'，否则import './foo'无法自动匹配 TS 文件
关键配套：.babelrc 或 babel.config.js
仅靠 loader 不会生效，必须配好 Babel 预设：
- 创建
.babelrc（根目录）：{ "presets": [ "@babel/preset-env", ["@babel/preset-typescript", { "allowDeclareFields": true }] ], "plugins": [ ["@babel/plugin-transform-runtime", { "corejs": 3, "regenerator": true }] ] } -
@babel/preset-env负责语法降级，依赖browserslist字段决定编译目标 -
@babel/preset-typescript剥离类型注解、接口、泛型等，不校验类型，速度快
补充要点：TS 类型检查与 polyfill
这种方案默认不做类型检查，也不自动注入运行时垫片：
- 类型检查需单独运行
tsc --noEmit或搭配fork-ts-checker-webpack-plugin - Polyfill 行为由
@babel/preset-env的useBuiltIns: "usage"控制，需同时配core-js和browserslist - 若项目中用了
Array.prototype.flat等新 API，且目标浏览器不支持，必须引入core-js/stable并开启useBuiltIns
和 ts-loader 混用？不推荐直接串联
虽然技术上可以写成 [babel-loader, ts-loader]，但语义冲突：
-
ts-loader默认已将 TS 编译为 ES2017+ JS，再交由 babel-loader 处理是冗余的 - 若坚持混用，务必开启
ts-loader的transpileOnly: true，并关闭babel-loader对.ts的处理，避免重复编译 - 更合理的分工是：ts-loader 负责类型检查 + 初步转译，babel-loader 专攻语法降级 + polyfill 注入
