配置别名路径 @

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/*"]
    }
  }
}
相关推荐
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句1 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom1 小时前
JavaScript reduce()函数详解
javascript
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手2 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅2 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang3 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6663 小时前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼3 小时前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试