使用react-app-rewired将webpack配置添加到react-create-app

React-app-rewired是一个用于修改create-react-app默认配置的工具。它允许开发者在不eject（弹出）create-react-app的情况下，对webpack配置进行自定义。

React-create-app是一个用于快速搭建React应用的脚手架工具，它提供了一个默认的webpack配置，但有时候我们需要对webpack进行一些自定义配置，这时就可以使用react-app-rewired来实现。

使用react-app-rewired将webpack配置添加到react-create-app的步骤如下：

1. 首先，确保已经安装了create-react-app和react-app-rewired。可以使用以下命令进行安装：

npm install -g create-react-app
npm install -g react-app-rewired

1. 在项目根目录下创建一个config-overrides.js文件。这个文件将用于添加自定义的webpack配置。
2. 打开config-overrides.js文件，并添加以下内容：

const path = require('path');

module.exports = function override(config, env) {
  // 在这里添加你的自定义webpack配置
  // 例如，添加一个别名(alias)来简化导入路径
  config.resolve.alias['@'] = path.resolve(__dirname, 'src');

  return config;
};

在这个例子中，我们使用resolve.alias来添加一个别名@，指向src目录。这样，在导入文件时，可以使用@来代替src，例如import App from '@/components/App'。

1. 修改package.json文件，将scripts中的start、build和test命令改为使用react-app-rewired来启动：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  ...
}

现在，当你运行npm start、npm build或npm test时，react-app-rewired将会读取config-overrides.js文件中的配置，并将其应用到create-react-app的默认配置中。

使用react-app-rewired可以方便地对create-react-app的webpack配置进行自定义，从而满足项目的特定需求。