webpack的resolve配置主要解决路径别名和后缀省略两大问题：一是通过alias用@等别名替代深层相对路径，值必须为path.resolve(__dirname, 'src')类绝对路径；二是通过extensions配置['.ts', '.vue', '.js']等扩展名实现导入时省略后缀。
Webpack 的 resolve 配置主要解决两个实际问题：一是用简短别名替代深层相对路径（比如把 ../../../utils/request 缩成 @utils/request），二是允许导入时省略常见后缀（如 .js、.vue、.ts）。这两项配置都写在 webpack.config.js 的 resolve 对象里，必须用绝对路径，否则会失效。
配置别名 alias 让路径更简洁
别名本质是路径映射，键是自定义前缀，值必须是完整绝对路径。推荐用 @ 指向 src，再按需加语义化别名：
- 用
path.resolve(__dirname, 'src')获取真实路径，避免./src这类相对写法 - 常见别名示例：
@（源码根目录）、@comps（组件）、@api（接口层）、@img（图片资源） - Vue 或 React 项目中，JS/TS 文件直接写
import Button from '@comps/Button.vue' - 在 CSS/SCSS 的
@import中使用别名，要加~前缀，例如@import '~@styles/vars.scss' - 别名末尾加
$可实现精准匹配，比如'api$': path.resolve(__dirname, 'src/utils/api.js')，这样import api from 'api'会命中，但import apiHelper from 'api/helper'不会
配置 extensions 省略文件后缀
Webpack 默认只尝试 .wasm、.mjs、.js、.json，项目中用了 Vue、TS、JSX 就得手动补全，否则会报“模块未找到”：
- 顺序很重要：把最常用扩展名放前面，比如
.vue在.js前，否则import Comp from './Comp'会先找Comp.js而不是Comp.vue - 典型配置：
extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue', '.json'] - 注意：省略后缀只对模块导入生效（
import/require），对 HTML 中的src或 CSS 中的url()不起作用
TypeScript 项目必须同步配 tsconfig.json
Webpack 的 alias 只管打包，TypeScript 编译器和编辑器提示不认它，所以必须额外配置 tsconfig.json：
-
baseUrl设为"."（项目根目录），作为所有路径的基准点 -
paths与 Webpack 别名保持一致，比如 Webpack 有@/*: src/*，tsconfig 就写"@/*": ["src/*"] - 改完
tsconfig.json后，VS Code 通常需要重启 TS 服务（Ctrl+Shift+P → “TypeScript: Restart TS server”）才能生效
Vue CLI 项目配置方式不同
Vue CLI 3+ 不暴露原始 webpack 配置，得通过 vue.config.js 的 chainWebpack 修改：
- 用
config.resolve.alias.set('@', resolve('src'))逐个添加别名 - 修改后必须重启开发服务器（
npm run serve），热更新不会触发 alias 生效 - 如果用 WebStorm 或 VS Code，建议额外建一个
webpack.alias.js文件指向相同配置，用于 IDE 路径跳转识别
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
