在项目中，为了防止相对路径在代码中的嵌套与更多的复用。需要在webpack中配置alias，这样做的好处是什么？

一、能更直观的查看路径与协同合作

示例：

  resolve: {
    modules: ['node_modules', path.join(__dirname, '../node_modules')],
    extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
    alias: {
      '@':path.resolve(__dirname, './src'),
      '~':path.resolve(__dirname, './')
    }
  },

这样配置能将项目中的相对路径用@与~来代替。

就算以后多人协作，或者有更深的层级或者移动目录，都不会有太大的影响。

二、能利用VSCode的快速链接直接到目录文件

配置好路径代理之后可以直接用ctrl+鼠标左键链接到指定文件。在开发过程中，利于自己和其他组员查看组件与注释。

但是如果不能正常跳转请尝试以下方法：

添加vscode的配置json：

{
  "compilerOptions": {
   "target": "ES6",
   "allowSyntheticDefaultImports": false,
   "baseUrl": "./",
   "paths": {
    "@/*": ["src/*"],
    "~/*": ["/*"]
   },
   "jsx": "react"
  },
  "exclude": ["node_modules", "app"],
  "include": ["src"],
 }

其中paths是跳转规则、jsx是为jsx文件做解析。