如果你在你的react項目里面使用相對路徑，那么有可能會出現(xiàn)下面這樣的代碼：
import Button from '../../../components/button/Button'
使用webpack的alias功能给僵，可以使得我們不必使用相對路徑,而是絕對路徑。
如果你在項目里面使用了TypeScript蔽豺，那么你還需要對tsconfig.json做相應(yīng)的配置蚪战。
如果你使用了Jest，也需要對Jest做相關(guān)的配置持痰。
所以接下來灶搜，我們依次給做三項配置：
一 webpack.config.js的相關(guān)配置
//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, 當(dāng)你見到@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'
現(xiàn)在就可以變?yōu)椋?/p>
import Button from '@src/components/button/Button'
