配置别名路径 @

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/*"]
    }
  }
}
相关推荐
伍哥的传说2 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
前端程序媛-Tian3 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao3 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0013 小时前
实现视频实时马赛克
linux·前端·javascript
爱分享的程序员4 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉4 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
草履虫建模4 小时前
RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程
java·前端·javascript·vue.js·spring boot·docker·dockerhub
阿丽塔~6 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
zhuà!7 小时前
taro+react重新给userInfo赋值后,获取的用户信息还是老用户信息
javascript·react.js·taro
超浪的晨7 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发