React 发现无webpack相关的配置的目录，使用eject进行创建， 安装插件需要进行配置

React 发现无webpack相关的配置的目录，进行创建， 安装插件需要进行配置

react脚手架将webpack相关的配置隐藏起来了，如果想要看到webpack的配置可以执行package.json文件中的一个脚本：“eject”: “react-scripts eject”，操作不可逆

关于eject

eject 命令是 Create React App（CRA）（脚手架）提供的一个命令，用于将项目的配置从隐藏状态“弹出”到可编辑的状态。
create-react-app文档
执行npm run eject命令会将react-scripts释放到本地项目中，可以通过修改对应的文件完成配置。同时会删除react-scripts依赖包，修改package.json中命令。命令执行完毕以后，我们就会看到本地项目中多出了scripts和config两个目录文件。同时，package.json文件命令也被修改了。
与上述图片对比

此时，如果在执行启动或者打包命令，就是直接执行的scripts目录下对应的文件了。我们可以很方便的根据需要修改对应的文件配置即可。

但值得注意的是，npm run eject命令是不可逆的，即执行之后不可恢复，这就造成了如果后续我们想通过脚手架的react-scripts包增加新的特性，比如PWA支持，是不可行的

配置

1、使用eject命令暴露封默认的安装包解析

npm run eject
或
yarn eject

   这个操作是永久的，暴露出来之后无法还原
   Are you sure you want to eject? This action is permanent.

    如果原来项目有修改，那么会有提示暂存到本地的git仓库

2.暴露之后的目录以及相关内容解析

分析

文件夹中会新增config和scripts文件，package.json文件可以看到项目的依赖项dependemcies和 script配置发生了变化，以及添加了jest的配置

eject的副作用：

1、如果后续的cra更新了并添加了很多不错的功能，如果想应用到自己的项目中，可以通过更新cra版本来实现，而不是更新webpack的配置，但是如果已经对项目进行了eject操作，那么就无法很好的迎接未来

2、(注意) 对于代码洁癖的人来说不是很友好，因为eject之后，package.json文件会被写入很多依赖项，还有其他的脚本和配置文件

3、如果你有多个项目都是eject的，那么修改配置，可能会大量的复制粘贴，因为大多数情况下，项目的配置（比如webpack和babel）都是相同的

webpack.config.js 文件 配置less

//引入 less 文件的配置
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;  

替代方案

使用react-app-rewired + customize-cra或@craco/craco