一般前端项目里使用'./pages/home/home.js'这样的引用方式，后面的.js也可以省略，但是如果你是.ts或.tsx结尾的文件，系统就不认识了。

比如：

import Home from './pages/home/home';

从下面的报错日志也可以看出，找了很多种文件类型都没有找到，而这些找的文件类型并没有包含.ts和.tsx后缀。

如何才能让系统也能默认识别.ts和.tsx后缀的文件呢？

ERROR in ./src/App.tsx 24:0-37
Module not found: Error: Can't resolve './pages/home/home' in '/Users/maomao/Documents/demo/pc/askteam/src'
resolve './pages/home/home' in '/Users/maomao/Documents/demo/pc/askteam/src'
  using description file: /Users/maomao/Documents/demo/pc/askteam/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/maomao/Documents/demo/pc/askteam/package.json (relative path: ./src/pages/home/home)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/maomao/Documents/demo/pc/askteam/src/pages/home/home doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/maomao/Documents/demo/pc/askteam/src/pages/home/home.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/maomao/Documents/demo/pc/askteam/src/pages/home/home.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/maomao/Documents/demo/pc/askteam/src/pages/home/home.wasm doesn't exist
      as directory
        /Users/maomao/Documents/demo/pc/askteam/src/pages/home/home doesn't exist
 @ ./src/index.jsx 4:0-28 11:36-39

webpack 5.56.0 compiled with 1 error in 170 ms

解决办法

在webpack文件里添加默认后缀列表：

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
  },
}