【React】怎么暴露webpack配置规则？

暴露webpack配置规则的步聚如下

1. 在根目录下运行终端命令：yarn eject或npm run eject修改webpack默认配置，保险起见先执行命令：git add -A //添加到缓存区，git commit -m'init' //保存到历史区，再执行：yarn eject。

2. 终端命令：yarn eject的执行情况：
   会发生一些错误，因为之前我把代码给改了，所以在暴露之前我们先把代码提交到git历史区保留下来（这个操作是防止暴露后的代码覆盖了我们自己的代码）。
   注意：有这个错误提示的前提是（1）本地有git仓库。（2）代码在暴露之前有修改过代码。

cengguilideMacBook-Pro:app zengguili$ yarn eject
yarn run v1.22.19
$ react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

✔ Are you sure you want to eject? This action is permanent. … yes
Ejecting...

Copying files into /Users/zengguili/app/app
  Adding /config/env.js to the project
  Adding /config/getHttpsConfig.js to the project
  Adding /config/modules.js to the project
  Adding /config/paths.js to the project
  Adding /config/webpack.config.js to the project
  Adding /config/webpackDevServer.config.js to the project
  Adding /config/jest/babelTransform.js to the project
  Adding /config/jest/cssTransform.js to the project
  Adding /config/jest/fileTransform.js to the project
  Adding /scripts/build.js to the project
  Adding /scripts/start.js to the project
  Adding /scripts/test.js to the project
  Adding /config/webpack/persistentCache/createEnvironmentHash.js to the project

Updating the dependencies
  Removing react-scripts from dependencies
  Adding @babel/core to dependencies
  Adding @pmmmwh/react-refresh-webpack-plugin to dependencies
  Adding @svgr/webpack to dependencies
  Adding babel-jest to dependencies
  Adding babel-loader to dependencies
  Adding babel-plugin-named-asset-import to dependencies
  Adding babel-preset-react-app to dependencies
  Adding bfj to dependencies
  Adding browserslist to dependencies
  Adding camelcase to dependencies
  Adding case-sensitive-paths-webpack-plugin to dependencies
  Adding css-loader to dependencies
  Adding css-minimizer-webpack-plugin to dependencies
  Adding dotenv to dependencies
  Adding dotenv-expand to dependencies
  Adding eslint to dependencies
  Adding eslint-config-react-app to dependencies
  Adding eslint-webpack-plugin to dependencies
  Adding file-loader to dependencies
  Adding fs-extra to dependencies
  Adding html-webpack-plugin to dependencies
  Adding identity-obj-proxy to dependencies
  Adding jest to dependencies
  Adding jest-resolve to dependencies
  Adding jest-watch-typeahead to dependencies
  Adding mini-css-extract-plugin to dependencies
  Adding postcss to dependencies
  Adding postcss-flexbugs-fixes to dependencies
  Adding postcss-loader to dependencies
  Adding postcss-normalize to dependencies
  Adding postcss-preset-env to dependencies
  Adding prompts to dependencies
  Adding react-app-polyfill to dependencies
  Adding react-dev-utils to dependencies
  Adding react-refresh to dependencies
  Adding resolve to dependencies
  Adding resolve-url-loader to dependencies
  Adding sass-loader to dependencies
  Adding semver to dependencies
  Adding source-map-loader to dependencies
  Adding style-loader to dependencies
  Adding tailwindcss to dependencies
  Adding terser-webpack-plugin to dependencies
  Adding webpack to dependencies
  Adding webpack-dev-server to dependencies
  Adding webpack-manifest-plugin to dependencies
  Adding workbox-webpack-plugin to dependencies

Updating the scripts
  Replacing "react-scripts start" with "node scripts/start.js"
  Replacing "react-scripts build" with "node scripts/build.js"
  Replacing "react-scripts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset

Running yarn...
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@13.5.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
warning "eslint-config-react-app > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "react-dev-utils > fork-ts-checker-webpack-plugin@6.5.3" has unmet peer dependency "typescript@>= 2.7".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
Ejected successfully!

Staged ejected files for commit.

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1

✨  Done in 18.94s.

3. 因为之前在“调整初始化脚手架中删除了很多用不上的文件：node_ modules不动，public下只留两个文件：index.html和favicon.ico， src下只留一个文件：index.js。

4. 所以在执行yarn eject命令时会报错，在暴露之前，先让我们把代码提交到git历史区保留下来（防止暴露后的代码覆盖了我们的代码，前提条件：1. 本地有git仓库。2. 代码在暴露之前修改过）输入命令保留：

git add -A  //把我们的东西提交到暂存区
git commit -m'init'  //提交到历史区

5. 终端命令：git add -A和git commit -m'init'的执行情况：

cengguilideMacBook-Pro:app zengguili$ cd app
cengguilideMacBook-Pro:app zengguili$ git add -A
cengguilideMacBook-Pro:app zengguili$ git commit -m'init'
[master 62f0b85] init
 Committer:  <zengguili@cengguilideMacBook-Pro.local>
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly:

    git config --global user.name "Your Name"
    git config --global user.email you@example.com

After doing this, you may fix the identity used for this commit with:

    git commit --amend --reset-author

 14 files changed, 22 insertions(+), 261 deletions(-)
 delete mode 100644 README.md
 rewrite public/index.html (82%)
 delete mode 100644 public/logo192.png
 delete mode 100644 public/logo512.png
 delete mode 100644 public/manifest.json
 delete mode 100644 public/robots.txt
 delete mode 100644 src/App.css
 delete mode 100644 src/App.js
 delete mode 100644 src/App.test.js
 delete mode 100644 src/index.css
 rewrite src/index.js (71%)
 delete mode 100644 src/logo.svg
 delete mode 100644 src/reportWebVitals.js
 delete mode 100644 src/setupTests.js

6. 然后再输入命令：yarn eject执行后再输入y，在暴露当中它会帮我们安装所需的各种模块，文件夹中多了config和scripts这两个文件夹。
7. 注意：一但暴露出来就无法再还原回去。

注意：如果无法按照以上步骤执行，请看解决以下错误的方案。
（1.暴露webpack规则报错：error Command failed with exit code 1
8. 暴露webpack规则报错：error Couldn‘t find a package.json file in “/Users/zengguili/textapp“）

法二

1. 使用 craco 在 React 脚手架的基础上进行 Webpack 配置。
2. 安装 craco：npm install craco
3. 在根目录下创建 craco.config.js 配置文件编写配置信息。
4. 使用 craco 启动项目：将 package.json 中 scripts 里的 react-scripts 改为 craco，才能将 craco.config.js 中的配置合并到 React 脚手架的配置信息中。