如果大家看了苏南大叔的react-scripts初步分析文章,就可以知道:create-react-app的背后,隐藏着一个webpack。一般情况下来说,webpack是默默隐藏的幕后英雄,你不需要修改它的配置,只需要简单无脑使用即可。

苏南大叔:create-react-app 工程,如何通过 eject 释放配置文件? - react-app-hero
create-react-app 工程,如何通过 eject 释放配置文件?(图6-1)

但是!总是有人想要修改webpack配置的。那么,到底如何才能完成修改webpack配置这个需求呢?在本文中,苏南大叔提出了个解决方案。本文测试环境:mac+create-react-app@2.1.2

解决方案

create-react-app本身的webpack配置文件存在于node_modules/react-scripts/目录下面,但是这个目录是node_modules/,里面的源码都是不建议修改的。create-react-app提供了一个命令,用于释放这些配置。命令是:

npm run eject
eject的翻译是:喷出,就是说把这些配置文件,从隐藏的位置给喷出来。这镜像,脑补一下很精彩。而且create-react-app并不推荐大家这么做,因为这个步骤无法逆转!

苏南大叔:create-react-app 工程,如何通过 eject 释放配置文件? - 00-run-eject
create-react-app 工程,如何通过 eject 释放配置文件?(图6-2)

npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

解决方案

解决方案就是:执行下面的命令。执行之前,一定要做好备份工作,因为这个步骤不可逆转,也不是官方推荐执行的命令。

npm run eject

如果显示权限错误,请加上sudo。中间有个等待输入y继续的过程,请不要傻等,想好之后就要需要主动输入y

? Are you sure you want to eject? This action is permanent. (y/N) 

苏南大叔:create-react-app 工程,如何通过 eject 释放配置文件? - 01-eject-y
create-react-app 工程,如何通过 eject 释放配置文件?(图6-3)

执行完毕后,项目根目录下面就有configscripts两个目录生成。同时,package.json里面的scripts,也更新了新的命令。

苏南大叔:create-react-app 工程,如何通过 eject 释放配置文件? - 02-eject-folder
create-react-app 工程,如何通过 eject 释放配置文件?(图6-4)

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
},

苏南大叔:create-react-app 工程,如何通过 eject 释放配置文件? - 03-eject-package
create-react-app 工程,如何通过 eject 释放配置文件?(图6-5)

错误解决方案

This git repository has untracked files or uncommitted changes:
Remove untracked files, stash or commit any changes, and try again.

如果您碰到git相关的错误信息的话,可以参见下面这篇文字:

注意事项

npm run eject之后,react-scripts命令就失效了哦。因为在node_modules/下面,都没有react-scripts/的目录了,它以另外的形式存在于这个项目里面了。这仅仅是个事物的变形转化,ta还在,以另外的形式存在。

苏南大叔:create-react-app 工程,如何通过 eject 释放配置文件? - grep-react
create-react-app 工程,如何通过 eject 释放配置文件?(图6-6)

相关链接

https://newsn.net/say/react-scripts-action.html

总结

看着多出来的两个文件夹:config/scripts/,您就可以再定义修改相关的create-react-app的系统逻辑了。不过这并不是推荐操作,请知悉。

苏南大叔原创的react小白入门系列教程,可以通过下面的链接地址访问:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   react    webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: