如果你在你的react项目里面使用相对路径，那么有可能会出现下面这样的代码：
import Button from '../../../components/button/Button'
使用webpack的alias功能，可以使得我们不必使用相对路径,而是绝对路径。
如果你在项目里面使用了TypeScript，那么你还需要对tsconfig.json做相应的配置。
如果你使用了Jest，也需要对Jest做相关的配置。
所以接下来，我们依次给做三项配置：
一 webpack.config.js的相关配置
//projectName/config/webpack.config.js
module.exports = {
//...
resolve: {
alias: {
'@src': path.resolve(__dirname, '../src')
}
}
};
二 tsconfig.json
虽然我们在第一步里，通过webpack配置了一个alias，但是typeScript并不知道webpack的黑魔法。所以，在tsconfig.json中，我们在compilerOptions选项里面需要配置baseUrl和paths两个选项来告诉typeScript, 当你见到@src/*的时候，其实是map到src/*的。
//tsconfig.json
"compilerOptions": {
//...
"baseUrl": ".",
"paths": {
"@src/*": [
"src/*"
]
}
}
三 jest.config.js
同样的，我们也需要告诉Jest这个别名，这个可以通过jest的配置项里面的moduleNameMapper这个选项来完成。
//jest.config.js
{
//...
"moduleNameMapper": {
"^@src/(.*)": "<rootDir>/src/$1"
},
}
完成了以上三步的配置，我们就可以在代码里面使用@src了，之前的：
import Button from '../../../components/button/Button'
现在就可以变为：
import Button from '@src/components/button/Button'
