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
模版代码:
如果提示react
版本冲突之类的错误,不要害怕。参考文章:
释放项目配置
在释放项目配置之前,记得提交代码到仓库,否则会有迷惑事件发生。
参考:
释放配置后的项目,目录结果如下图所示:

修改配置
定位到config/webpack.config.js
文件,定位到alias:
字段,大概line312
。添加新的别名设定:
根据实际情况进行别名修改即可。

测试代码
原版:
新版:

npm start
运行成功,证明测试通过。
相关文章


