具体配置分为两部分

1. 配置webpack 框架
2. 配置webstorm 编辑器

webpack配置

1. 下载安装craco

craco用于便捷替换webpack配置，而不用使用eject命令（当前泗洪react框架启动以后会对webpack的配置进行封装）

npm install @craco/craco --save-dev

2. 项目root目录下创建craco配置文件

craco.config.js 用于craco 命令进行映射识别

const path = require('path');

module.exports = {
    webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
}

3. 替换package.json中的启动命令

这样就可以在运行时正常识别简写路径

将原本的react-scripts替换为craco, 其中eject不需要替换

package.json

"scripts": {
    "start": "craco start",
    ...
    "eject": "react-scripts eject"
}

然后重新使用npm run start命令就可以正常启动了

webstorm配置

1. 在项目root目录下添加jsconfig.json文件

该文件主要用于指示js/ts编译器，让其识别配置路径，从而让智能补全和语法检查提示等功能正常运行

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Q.E.D.