webpack 的 resolve.extensions 决定模块导入时自动尝试的文件后缀顺序，typescript 项目需配置为 ['.tsx', '.ts', '.js', '.json'] 并配合 tsconfig.json 中 "moduleresolution": "node"，以确保类型检查与打包解析行为一致。
Webpack 通过 resolve.extensions 控制模块导入时自动尝试的文件后缀顺序，这对 TypeScript 项目尤其关键——它决定了 import './utils' 这类无后缀写法能否正确命中 .ts、.tsx 或 .js 文件。
extensions 的作用和默认行为
Webpack 默认只尝试 .js 和 .json。如果不显式配置，TypeScript 文件（如 utils.ts）即使存在，import './utils' 也会失败，报错 “Cannot find module”。必须手动加入 TypeScript 相关扩展名，并注意顺序。
正确的 extensions 配置项
在 webpack.config.js 的 resolve 部分添加：
extensions: ['.tsx', '.ts', '.js', '.json']
-
.tsx排最前：优先匹配 React + TS 文件（含 JSX） -
.ts紧随其后：覆盖纯 TypeScript 模块 -
.js保留：兼容已有的 JS 文件或类型声明缺失的第三方库 -
.json保持：支持 JSON 导入（如配置、语言包）
这个顺序不是随意的。Webpack 会按数组从左到右依次尝试拼接后缀，一旦找到对应文件就停止。把 .ts 放在 .js 前面，才能确保 import './api' 优先加载 api.ts 而不是同名的 api.js（如果两者都存在）。
配合 tsconfig.json 的 moduleResolution
仅靠 Webpack 的 extensions 不够，还需 TypeScript 编译器本身支持相同逻辑。在 tsconfig.json 中确认：
"moduleResolution": "node"
这是 TypeScript 默认值，意味着它也遵循 Node.js 的模块解析规则——包括按顺序尝试扩展名（.ts → .d.ts → .js）。这样，TS 类型检查阶段和 Webpack 打包阶段的路径解析行为才一致，避免“编辑器不报错、运行时报错”这类问题。
常见陷阱与建议
- 别漏掉
.js：很多 npm 包只有 JS 发布版，没提供类型定义，Webpack 需能回退到 JS 文件 - 不要加
.jsx或.mjs除非真用到：多余扩展名会拖慢模块解析速度 - 如果项目混合使用 ESM 和 CJS，且启用了
"type": "module"，确保module字段设为"ESNext"，并开启"esModuleInterop": true避免默认导出兼容问题 - 路径别名（alias）和 extensions 是协同工作的：比如
@/components/Button也会按同样顺序尝试Button.tsx、Button.ts等
