react18 ts中使用 alias

将create-react-app中集成的webpack配置弹出

npm run eject

修改config/paths.js文件

module.exports={
    appSrc: resolveApp('src'),
    imagesFile: resolveApp('src/static/images')
    IconsFile: resloveApp('src/static/icons')
}

修改config/webpack.config.js文件

reslove:{
    modules:['node_modules',paths.appNodeModules].concat(
        modules.additionalModulePaths || []
    ),
    extensions:path.moduleFileExtensions
    .map(ext => `.${ext}`)
    .filter(ext => useTypeScript || !ext.includes('ts')),
    alias:{
        'react-native':'react-native-web',
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling'
        }),
        ...(modules.webpackAliases || {}),
        '@src':paths.appSrc,
        '@Images':paths.imagesFile,
        '@Icons':paths.iconsFile
    },
    plugin:{
        ...
    }
}

在项目的一级目录下创建 paths.json

{
    "compilerOptions":{
        "baseUrl":".",
        "paths":{
              "@/*":["./src/*"],
              "@Images/*":["./src/static/images/*"],
              "@Icons/*":["./src/static/icons/*"]
        }
    }
}

修改tsconfig.json

{
...
"extends":"./paths.json"
}