项目别名配置随记

设置项目的路径别名

以 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/*"]
    }, 
   // ...  
  }
}

说明：1. 配有ts的项目必须在webpack和tsconfig里都添加对应的alias配置，否则会报错
2. 在tsconfig.json中配置paths时，必须要加baseUrl。

（仅做个人学习多次遇错的随记哈）