项目别名配置随记

最新推荐文章于 2025-12-11 16:54:57 发布

原创最新推荐文章于 2025-12-11 16:54:57 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #webpack #javascript

基础知识专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在React+TypeScript项目中设置路径别名，以简化模块引用。通过修改`webpack.config.js`和`tsconfig.json`文件，配置`resolve.alias`和`paths`字段，实现`@/pages`，`@/packages`，`@/utils`，`@/stores`等快捷引用。注意，配置`tsconfig.json`时需包含`baseUrl`，并确保在两个配置文件中都进行设置，以避免编译错误。

设置项目的路径别名

以 react + typescript为例，其他项目配置基本一样

项目结构展示

在这里插入图片描述

// config/webpack.config.js
module.export = {
	...config,
	resolve: {
    extensions: ['.tsx', '.ts', '.js', '.less'],
    alias: {
      '@/pages': path.resolve(__dirname, './../src/pages/'),
      '@/packages': path.resolve(__dirname, './../src/packages/'),
      '@/utils': path.resolve(__dirname, './../src/utils/'),
      '@/stores': path.resolve(__dirname, './../src/stores/'),
    }
  },
}

// tsconfig.json
{
  "compilerOptions": {
  	// ...
  	  "baseUrl": "./",
      "paths": {
      "@/pages/*": ["./src/pages/*"],
      "@/packages/*": ["./src/packages/*"],
      "@/utils/*": ["./src/utils/*"],
      "@/stores/*": ["./src/stores/*"]
    }, 
   // ...  
  }
}