React路径解析配置插件 - craco

路径解析配置

因为CRA本身把webpack配置包装到了黑盒, 无法直接修改, 所以我们需要借助一个插件 - craco

1. 安装craco npm i -D @craco/craco
2. 在项目根目录创建配置文件craco.config.js
3. 配置文件中添加路径解析配置
4. 包文件名配置启动和打包命令`

craco.config.js

const path = require('path')
module.exports = {
  // webpack配置
  webpack: {
    // 配置别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

package.json

  "scripts": {
    "start": "craco start",
    "build": "craco build",
  },

联想路径配置

1. 根目录新增配置文件 jsconfig.json
2. 添加路径提示配置

{
  "compilerOptions":{
    "baseUrl":"./",
    "paths":{
      "@/*":[
        "src/*"
      ]
    }
  }
}