React配置路径别名

• 第一步：安装craco：

  • yarn add @craco/craco

• 第二步：修改package.json文件

  • 原本启动时，我们是通过react-scripts来管理的；
  • 现在启动时，我们通过craco来管理；

  "scripts": {
  -"start": "react-scripts start",
  -"build": "react-scripts build",
  -"test": "react-scripts test",
  
  + "start": "craco start",
  + "build": "craco build",
  + "test": "craco test",
  }
  复制代码
  

• 第三步：在根目录下创建 craco.config.js 文件用于修改默认配置↓

  • module.exports = { // 配置文件 }

// 根路径 -> craco.config.js
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)

module.exports = {
  webpack: {
    alias: {
       // @映射src路径
      '@': resolve('src'),
      'components': resolve('src/components')
    }
  }
}