webpack 中配置绝对路径别名需在 resolve.alias 中设置映射（如 '@/': path.resolve(__dirname, 'src/')），并同步配置 jsconfig.json/tsconfig.json 的 baseurl 和 paths、eslint 的 import/resolver，vue cli 和 vite 有对应配置方式，最后重启服务验证跳转与导入是否正常。
在 Webpack 中配置绝对路径别名，核心是通过 resolve.alias 告诉 Webpack 把某个别名（比如 @）映射到项目中的实际目录，再配合 IDE 和 TypeScript（如使用）的路径提示支持，就能让 import utils from '@/utils' 这样的写法正常工作且可跳转。
配置 Webpack 的 resolve.alias
在 webpack.config.js 的 resolve 选项中添加 alias，指向你希望简化的根目录（通常是 src）：
- 用
path.resolve(__dirname, 'src')获取绝对路径，避免相对路径出错 - 别名键名结尾加
/（如'@/': path.resolve(__dirname, 'src/')），可确保匹配子路径（如@/components/Button） - 常用别名示例：
@指向src，@assets指向src/assets，@utils指向src/utils
让 ESLint 和 VS Code 正确识别别名
Webpack 能解析别名，但 ESLint 和编辑器默认不认识，需额外配置：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- VS Code：在项目根目录的
jsconfig.json（JS 项目）或tsconfig.json（TS 项目）中添加"baseUrl"和"paths" - 例如：
"baseUrl": "./"，"paths": { "@/*": ["src/*"] } - ESLint：如果用了
eslint-plugin-import，需在.eslintrc.js中配置settings.import/resolver，指定webpack或直接写alias映射
Vue CLI 或 Create React App 的特殊处理
这些脚手架底层也是 Webpack，但不直接暴露配置文件：
- Vue CLI：在
vue.config.js中导出对象，用configureWebpack.resolve.alias或chainWebpack修改 alias - Create React App：默认不支持自定义 Webpack alias，需
eject或用craco/react-app-rewired注入配置 - Vite 项目：配置方式不同，在
vite.config.js的resolve.alias中设置，语法类似 Webpack
验证是否生效
改完配置后重启开发服务器，然后测试：
- 写一个
import { foo } from '@/utils/helper'，看能否正确导入、类型提示是否正常、Ctrl+点击能否跳转 - 检查浏览器控制台或构建日志，确认没有
Module not found错误 - 注意大小写和斜杠方向：Windows 下路径分隔符不影响，但别名键名和 import 路径要严格一致（如
@/不能写成@\）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
