(不暴露默认配置的情况)
1. 安装依赖 (
react-app-rewired
customize-cra
@babel/plugin-proposal-decorators)
npm i react-app-rewired
npm i customize-cra
npm i @babel/plugin-proposal-decorators
2. 修改package.json中的scripts脚本
需要使用react-app-rewired来启动项目
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
3. 在根目录新建 config-overrides.js 文件 配置别名
// config-overrides.js 文件
const { override, addDecoratorsLegacy, addWebpackAlias } = require('customize-cra');
const path = require("path");
module.exports = override(
addDecoratorsLegacy(),
addWebpackAlias({
["@"]: path.resolve(__dirname, "./src"),
["assets"]: path.resolve(__dirname, "./src/assets"),
["components"]: path.resolve(__dirname, "./src/components"),
["pages"]: path.resolve(__dirname, "./src/pages")
})
)
4. 项目中引入
import Home from 'pages/Home';
适用于js语言, ts需额外配置 参考文档 https://www.jianshu.com/p/6f8a98a9f2e2