react webpack配置组件路径引用 @与自定义

暴露配置文件：

create-react-app 生成的项目看不到 webpack 相关的配置文件，需要先暴露出来，使用如下命令

npm run eject

---

修改配置文件：

webpack.config.js

//把一个路径或路径片段的序列解析为一个绝对路径
 path.resolve(__dirname, '../')
// 静态储存当前目录绝对路径  __dirname：目录名
const staticRootDir = path.resolve(__dirname, '../');

resolve: {
      ...
      alias: {
        ...
        // 路径引用 @
        '@': paths.appSrc,
        //配置指定路径
        "@utils": path.resolve(staticRootDir, './src/utils'),
        //或
        "@utils": path.resolve('../', './src/utils'),
      }
    }

TypeScript+tsconfig.json文件，使用@时进行快捷点击跳转

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    //----------------------------例如
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@page/*": ["src/page/*"],
      "@style": ["src/style"],
      "@style/*": ["src/style/*"],
      "@store": ["src/store"],
      "@store/*": ["src/store/*"],
      "@axios": ["src/axios"],
      "@axios/*": ["src/axios/*"],
      "@utils": ["src/utils"],
      "@utils/*": ["src/utils/*"],
    },
    //---------------------------
    "typeRoots": ["src/types"]
  },
  "include": [
    "src"
  ]
}```