开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 22 天，点击查看活动详情
创建一个 React 项目并启动后（这里不再介绍如何搭建框架），打开 packag.json 文件。可以看到 eject 是 scripts 属性中的一部分，他表示的是更改 webpack 配置。
如果项目中需要使用 less（脚手架默认使用 sass，除 sass 外的需要进行配置），或者配置一些默认路径等等，需要手动修改 webpack 的配置。
1、执行 eject
npm run eject
// 或者：yarn eject
选择 y 后开始执行：
注意事项：
- 操作之前先将本地修改的代码提交，否则会出现如下提示：
- eject 是单向操作，操作后无法还原
只能执行 npm install create-react-app -g 重新搭建项目
2、eject 配置后的结构
配置完成后，来看看项目中的变化。
- config：webpack.config.js 文件在这里
- script：启动、打包、测试相关的文件，eject 文件消失
- package.json
package.json
1. scripts
- eject 操作后，eject 命令消失（不可逆操作）
- 不再使用 react-scripts 封装的插件执行命令，直接基于 node 来执行对应的入口文件
2. dependency
eject 之后，会把 webpack 打包需要的所有模块都重新安装一遍，放在依赖项中。其中：
- babel-preset-react-app：对原来的 @babel/preset-env 语法包的重写，目的是将 ES6 转换为 ES5 语法，识别 React 语法，实现代码转换
- 默认 sass 预编译语言。如果使用 less 等需要单独处理
yarn add less less-loader@8 // 避免版本太高不兼容问题
yarn remove sass-loader
3、使用 less 需要修改的配置
将 webpack.config.js 文件中所有以 sass 为前缀的内容改为 less 前缀即可。
新建一个 .less 文件做测试，并引入。less 文件中写一个简单样式测试：
@RED: red
div {
height: 100%;
background: @RED
}
4、目录设置 @ 符号作为路径前的别名
在 alias 中配置后就可以表示 src 这层目录： '@': paths.appSrc。
