配置别名路径 @

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

1. 路径解析配置(Webpack)-- craco 插件

把 @/ 解析为 src/

配置步骤:

1.安装 craco

javascript 复制代码
npm i -D @craco/craco
  1. 项目根目录下创建配置文件

craco.config.js

  1. 配置文件中添加路径解析配置
javascript 复制代码
const path = require("path");

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};
  1. 包文件中配置启动和打包命令
javascript 复制代码
  "scripts": {
    "start": "craco start",
    "build": "craco build",
  }

2. 路径联想配置(VsCode)-- jsconfig.json

VsCode在输入 @/ 时,自动联想出对应的 src/ 下的子级目录

javascript 复制代码
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
相关推荐
全宝15 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele39 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮1 小时前
【无标题】
开发语言·前端·javascript
fie88891 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
徊忆羽菲2 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃3 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想3 小时前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷3 小时前
TypeScript-webpack
javascript·webpack·typescript
Rockson3 小时前
使用Ruby接入实时行情API教程
javascript·python