node 和 react-app-rewired 修改 React 打包目录的流程
背景
基于 SpringBoot + React 前后端分离的工程，为了便于打包，通常需要配置 React 项目的打包目录为 SpringBoot 工程的 resources/static ，并在 pom.xml 打包插件中配置 prepare-package 阶段执行 npm run build 先打包前端 React 工程。
这样比从 dist 目录下拷贝前端文件到 static 目录方便多了，本文记录两种不同前端打包插件配置 React 打包目录的方法。
基于 node 的工程
创建的工程包含一个 scripts 目录，package.json 中的脚本配置为：
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},复制代码修改步骤如下：
第一步，执行 npm run eject 先导出配置文件。
第二步，修改 config/paths.js 中的 appBuild 配置为 Web 工程的静态文件目录，例如：
appBuild: resolveApp('../xxx/src/main/resources/static'),复制代码基于 react-app-rewired 的工程
package.json 中的脚本配置为：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}复制代码该场景需要修改创建配置文件 config-overrides.js ，添加 appBuild 配置，步骤如下：
第一步，在根目录下创建文件命名为 config-overrides.js。第二步，编辑文件，写入定向配置：
const {override, fixBabelImports} = require('customize-cra');
const path = require('path')
const paths = require('react-scripts/config/paths')
// 修改打包文件路径为 web 工程的 resources 目录
paths.appBuild = path.join(path.dirname(paths.appBuild),
'../xxx/src/main/resources/static')
module.exports = override(fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
})
);复制代码启示录
一个 React 项目前后 package.json 配置的脚本内容不一样，后面用的 react-app-rewired 插件，导致先前配置的 appBuild 不生效。
与备份项目对比，发现前后用的打包脚本不一样，才知道了修改 React 的打包目录还有这种方法。
相比于 node 脚本， react-app-rewired 插件不需要导出配置文件，直接添加 appBuild 更方便一些！
作者：毕小宝
链接：https://juejin.cn/post/7039287005863378958