React 修改打包目录

需求说明： create-react-app 搭建的项目，默认的打包路径为build, 与当前项目的部署路径 dist 不一致，需要手动更改文件夹名称。

使用eject 命令暴露配置，然后修改打包地址

说明：这个命令，是不可逆的，执行之前，请将代码备份或提交版本库

使用eject命令暴露配置：

npm run eject

修改暴露出的配置文件config/path.js，将appBuild修改为需要输出的位置。
使用npm install命令安装依赖，然后执行npm run build打包

说明：create-react-app在创建React项目的时候，是隐藏了许多开发者不需要过多关心的配置项的，尽量简化了前端的开发。而eject命令则可以让这些配置项暴露出来。

eject的弊端：

eject命令是不可逆的（至少官方没有提供回退的方法）。使用了这个命令，你就要接受你的开发目录面多了很多的配置文件和脚本。

这还不是最关键的，因为我的项目使用了antd作为UI框架，其使用了react-app-rewired这个东东，导致我在eject之后执行npm run build会报错。

使用react-app-rewired在不eject的情况下修改打包地址

首先当然是要引入react-app-rewired , 会有一个config-overrides.js

增加如下代码：

 const path = require('path');
 
  const paths = require("react-scripts/config/paths");
  paths.appBuild = path.join(path.dirname(paths.appBuild), "dist");
  config.output.path = path.join(path.dirname(config.output.path), "dist");

重新打包

npm run build

配置代码解析

const path = require('path');

说明：这行代码是基于require.js，是一个js进行引入包的工具。通过这行代码，拿到path，才能够对路径做处理。

const paths = require('react-scripts/config/paths');

说明：这里这行代码是为了获取项目的路径配置。react-scripts里面有React项目用于打包的命令，以及配置文件，如果你进行了eject，会发现config和script目录里的内容与react-scripts里的同名目录惊人的相似。可以认为eject是把这里的配置暴露出来了。

paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist');

说明：这行代码是修改配置里的appBuild目录，React项目在进行build的时候，都是根据这里配置的目录做的操作（例如检查打包后的代码大小，计算Gzip等），必须要修改，不然打包会失败。

config.output.path = path.join(path.dirname(config.output.path), 'dist');

说明：这行代码就是实现我们目的的根源了，修改项目打包地址。