一 问题

路径结构 0

0-1      0-1-0      0-1-2        0-1-2-0          0-1-2-0-0      0-2        0-2-0

如过0-1-2-0-0里面的文件引用0-2-0里面的文件：

（1）相对路径写法

../../../../0-2/0-2-0/file

(2)绝对路径写法

/0-2/0-2-0/file

使用相对路径引用每次引用都要花费精力写很长的路径查找；

而使用绝对路径会有安全性的问题（test）

二 解决方案

1. webpack alias

module.exports={...  resolve: {    alias: {      src: path.resolve(__dirname,'./src'),    },  },...}

Question:

如果使用了ESlit,ESlint无法识别你自定义的路径变量，会报错2.解决ESlint报错：使用 ，告诉eslint，使用webpack的resolver来检查package是否引用正确

1.安装

npm install eslint-import-resolver-webpack  --save

2.修改.eslintrc

配置示例：

module.exports = {   // ...   // eslint-import-resolver-webpack 让eslint，使用webpack的resolver来检查package是否引用正确   settings: {       "import/resolver": 'webpack',   }, };

alias同样会有在IDE中无法定位函数和模块的问题等智能提示无法使用的问题

更过配置请参考：3.智能路径提示现在路径变量已经能正常工作了。但是在IDE下编辑有点问题：（1）智能路径提示不能用了解决方案：vscode jsconfig.jsonjsconfig.json：

添加jsconfig.json

{    "compilerOptions": {        "target": "es6",        "baseUrl": ".",        "paths": {            "src": ["./src/*"],        }    },    "include": [        "src/**/*",    ]}

4.定位模块

解决方案：使用VScode插件Path Intellisense

5.然后使用 'src/utils' 相当于 '/src/utils'