create-react-app项目，使用自定义别名方案一：释放配置

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文标的物是create-react-app创建的项目，需求是修改对应的webpack配置，功能需求是识别路径别名@符号。换句话说，就是vue代码里面的@表示根目录的功能，在react（create-react-app）项目上的重现。实现方案上有好几个，本文先说第一个方案，释放cra项目配置项目，然后做修改。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react@19.0.0。eject一下cra项目，惊喜不断... 实际上修改的是webpack的配置，所以别名识别的功能还是在webpack编译打包过程中发生的。

获得标的物

通过create-react-app获得一个目标测试cra模版代码：

create-react-app test
cd test

如果提示react版本冲突之类的错误，不要害怕。参考文章：

• https://newsn.net/say/create-react-app-fail.html

释放项目配置

在释放项目配置之前，记得提交代码到仓库，否则会有迷惑事件发生。

git add .
git commit -m 'submit'
npm run eject

参考：

• https://newsn.net/say/create-react-app-eject-2.html

释放配置后的项目，目录结果如下图所示：

修改配置

定位到config/webpack.config.js文件，定位到alias:字段，大概line312。添加新的别名设定：

'@': path.resolve(__dirname, '../src'),
'@utils': path.resolve(__dirname, '../src/utils'),

根据实际情况进行别名修改即可。

测试代码

原版：

import App from './App';

新版：

import App from '@/App';

npm start运行成功，证明测试通过。

相关文章

• https://newsn.net/say/create-react-app-port.html
• https://newsn.net/say/create-react-app-eject.html

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。