本來(lái)是想使用 craco
,但因?yàn)?react-scripts
版本是 5.0.0构蹬,craco
無(wú)法安裝,因此只能使用 react-app-rewired
方案
1. 準(zhǔn)備
安裝
npm i react-app-rewired -D
npm i react-app-alias -D
2. 配置 config-overrides.js
在項(xiàng)目根目錄下新增 config-overrides.js
,添加如下內(nèi)容:
const path = require('path');
const paths = require('react-scripts/config/paths');
const { aliasWebpack, configPaths} = require('react-app-alias')
module.exports = function override(config, env) {
//do stuff with the webpack config...
aliasWebpack(configPaths('./tsconfig.paths.json'))(config)
// 修改打包目錄
paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist');
config.output.path = path.join(path.dirname(config.output.path), 'dist');
return config;
}
3. 配置 package.json
{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
}
}