「每日一学」 CRA自定义webpack配置

最近使用CRA（Create-React-App）进行中后台系统模板的搭建，通过这个项目的搭建提升自己，感兴趣的小伙伴可以去我的项目主页体验，develop分支不定时更新，等较为完善以后会更新至master，希望对你有所帮助。

【前言】个人搭建CRA项目时有webpack方面的自定义配置需求，因为个人写代码的强迫症，不希望引入一长串相对路径路径，因此想到配置webpack中的alias（路径别名）减少相对路径的书写，整个过程以此文记录

简单查看源码得知CRA中webpack配置是放在react-scripts这个核心库中，因此马上查询CRA官方文档，在文档这一页中介绍了两种方法：

1. 暴露webpack配置npm run eject（官方文档不推荐，因为暴露后整个配置和脚本需要由你自己维护，react-scripts的官方更新将不会更到项目上）
2. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need（文档原话，fork react-scripts 项目的核心包和其他，自己进行维护，并且还能有官方的维护）
3. 类似于第二个方法，就是直接修改node_moudle里面react-scripts的webpack配置（不推荐，其他博客有博主这样建议，但是这个解决方法其他人npm i的时候会有问题，只能解决自己本地的问题，相当于没解决）

因此根据文档描述，果断采用第二种方法进行webpack配置（第一种方法，感兴趣的小伙伴可以查一查资料，这里不过多讲解啦）

第一步：找到存放react-scripts的github仓库，create-react-app是一个多包仓库，所以点进packages就可以找到对应的react-scripts包

第二步：将项目fork到自己的仓库下，只能fork整个项目，再将自己仓库下的react-scripts项目拉到本地

第三步：打开react-scripts文件夹，修改config文件夹下的webpack.config.js，resolve中找到alias，在最后加入'@': paths.appSrc（原本react-scripts项目中有导出的一个路径，直接用即可），这里path.resolve(__dirname,'../src')这种写法无法生效

第四步：把修改好的整个react-scripts项目搬到自己本地，将原本的node_moudle中装好的react-scripts卸载，引入本地react-scripts即可

写在最后

个人将修改好的项目发为npm包，方便自己导入，直接npm i logg-react-scripts进行安装，将原来的raect-scripts卸载，即可解决路径问题。