使用react-app-rewired修改配置

使用CRA创建的应用依旧是受到限制的，如果要对CRA创建的应用进行额外的配置，一般推荐使用react-app-wired。这个功能库可以使用以下命令完成安装。

npm install react-app-rewird --save-dev
yarn add react-app-wired --dev

安装好功能库之后，需要修改package.json中的启动项，将之前的react-scripts改为react-app-rewired。

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  }
}

完成这些准备工作之后，需要在项目根目录创建一个文件config-overrides.js，其中需要导出一个函数用来修改默认配置。这个文件的基本结构如下。

module.exports = function override(config, env) {
  return config;
};

或者导出一个最多包含三个字段的对象，其中每个字段都是一个函数，这种导出方法允许自定义Jest和Webpack Dev Server的配置，此时这个文件的基本结构如下。

module.exports = {
  // 用于配置React应用的编译，本处的配置不在测试中起效
  webpack: function (config, env) {
    return config;
  },
  // 用于配置Jest的运行，本处的配置不在项目编译时起效
  jest: function (config) {
    return config;
  },
  // 当使用npm run start或者yarn start时启动的Dev Server的配置
  devServer: function (configFunction) {
    return function (proxy, allowHost) {
      const config = configFunction(proxy, allowHost);
      return config;
    };
  },
  // 为编译React应用或测试应用时提供路径覆盖
  paths: function (paths, env) {
    return paths;
  }
};