React中用@符号编写文件路径实现方法介绍

yarn add @craco/craco

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

// 增量配置当前项目中的WEBpack配置，建议在react18中不要用
// 建议在react18中也不要用装饰器
// override 方法，如果webpack中有此配置则，覆盖，如果没有则添加
const path = require('path')
const { override, addWebpackAlias } = require('customize-cra')
// 方案2：自定义
const customConfig = () => config => {
    config.resolve.alias['@'] = path.resolve('src')
    return config
}
module.exports = override(
    // 方案1：使用webpack内置方法 
    // addWebpackAlias({
    //   '@': path.resolve('src')
    // }),
    customConfig()
)

// import countAction from '../../store/actionCreators/countAction'
import countAction from '@/store/actionCreators/countAction'

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