向 Create-React-App 添加 Webpack Alias 的相关设置

嘛,我最近在看 React。

然后遇到个问题就是,项目的文件夹可能比较复杂,想要互相引用的时候有时候路径很长。比如出现“../../../xxxx”这样的东西,就很丑。

这就自然想起用 Webpack Alias 来简化导入了,之前在用 Vue 的时候使用@来代替src目录很爽,所以打算照抄一下。

结果发现,如果使用 Create-React-App(下称CRA)的话,除非使用 CRA 的 eject 功能把所有配置文件 dump 出来之后自己修改,否则是无法修改 Webpack 的配置的。

由于 Webpack 的配置文件的修改是世界难题,CRA 官方也不推荐使用 eject ,所以我找到了一个局部修改 Webpack 配置的方法。

使用 react-app-rewired 来局部修改配置。

根据项目说明修改了 package.json 之后,来根目录下创建个 config-overrides.js。

这里用了对象展开运算符 ,以期不影响原来可能有的 alias 设置。

这样的话 Webpack 这边的设置是完成了。

还有一个问题就是,因为我使用 TypeScript 开发,TypeScript Language Server 并不认我的 @ 别名,所以我还需要修改一下 tsconfig.json。

在 complierOptions 下添加

重启 TypeScript Language Server,完全 OK。

发表评论

电子邮件地址不会被公开。 必填项已用*标注