webpack通过resolve.extensions配置实现省略后缀导入，按数组从左到右顺序尝试拼接后缀查找文件，如['.ts','.js','.json']会依次查找./foo.ts→./foo.js→./foo.json，首个存在即停止，且不可含空字符串。
在 Webpack 中，通过配置 resolve.extensions，可以让模块导入时省略文件后缀（如 .js、.ts），实现 import foo from './foo' 代替 import foo from './foo.ts'。关键在于让 Webpack 知道“当没写后缀时，按什么顺序尝试补全”。
配置 extensions 的核心逻辑
Webpack 会按数组中从左到右的顺序，依次尝试拼接后缀去查找文件。例如设为 ['.ts', '.js', '.json']，则 import './utils' 会依次查找：./utils.ts → ./utils.js → ./utils.json，找到第一个存在的即停止。
注意：数组中不能包含空字符串（''），否则会跳过所有后缀尝试，直接查无后缀文件，容易引发意外行为。
典型 TypeScript 项目配置示例
在 webpack.config.js 的 resolve 字段中添加：
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
const path = require('path');
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
alias: { '@': path.resolve(__dirname, 'src') }
},
module: {
rules: [
{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }
]
}
};
需要注意的细节
- 顺序很重要：把更常用的后缀放前面，比如 TS 项目应把
.ts放在.js前；否则可能误加载同名的.js文件 - 必须配合对应 loader：只配
extensions不够，还得有ts-loader或babel-loader处理.ts文件，否则构建会报错 - 避免重名冲突：如果
./utils.ts和./utils.js同时存在，Webpack 总是取数组里排前面的那个，不会警告 - Node.js 后端项目可精简：目标为
target: 'node'时，通常只需['.ts', '.js']，无需.json（除非显式需要）
验证是否生效的小技巧
改完配置后重启 Webpack（或 dev server），然后在代码中写一个不带后缀的 import，比如：
import { helper } from '@/utils';
如果能正常解析并编译通过，且没有报 Can't resolve 错误，说明配置已起作用。也可以在终端开启 --stats=normal 查看模块解析路径确认。
