WebStorm需手动配置才能识别Webpack的resolve.alias：将webpack.config.js移至项目根目录或在设置中指定路径；同时需在tsconfig.json中配置baseUrl和paths，并启用TS路径映射，重启TypeScript服务。
WebStorm 本身不自动识别 Webpack 的 resolve.alias，必须通过显式配置让它“看见”别名——否则 Ctrl+Click 跳转失效、路径补全空白、import 标红全是假警报。
Webpack 配置文件没被 WebStorm 识别？先确认位置和格式
WebStorm 只在项目根目录（即 package.json 所在层）扫描 webpack.config.js、webpack.config.cjs 或 webpack.config.mjs。放在 config/ 或 build/ 子目录里，它直接忽略。
- 最稳妥做法：把
webpack.config.js移到项目最外层，和package.json同级 - 必须放子目录？进
Settings → Languages & Frameworks → JavaScript → Webpack，手动指定完整路径，比如config/webpack.config.js，改完点右上角Reload configuration - 如果用 Vue CLI 3+ 或 Vite，它们没有传统
webpack.config.js，得额外建一个仅用于 IDE 识别的配置文件（如alias.config.js），内容只暴露resolve.alias
为什么 @/xxx 在代码里标红但运行正常？
因为运行时靠 Webpack/Vite 的 resolve.alias，而 WebStorm 默认只认 TypeScript 的 compilerOptions.paths。两套机制互不通信。
- 必须在
tsconfig.json里补全等价配置："baseUrl": "./src"和"paths": { "@/*": ["*"] } -
baseUrl必须是相对路径（./src✅，src❌，/src❌） -
paths的 key 必须以/结尾（@/*✅，@❌） - 确保已安装
@types/node，否则 TS 会报错并跳过整个paths解析 - WebStorm 设置里勾选
Use paths mapping from tsconfig.json，然后右下角 TS 图标 →Restart TypeScript Service
Vue CLI / Nuxt / Vite 项目怎么让 WebStorm 识别别名？
这些工具把别名写在 vue.config.js、nuxt.config.ts 或 vite.config.ts 里，WebStorm 不解析 JS/TS 动态逻辑，所以必须“翻译”成它能读的格式。
- 新建一个纯静态的
alias.config.js（名字任意），内容只导出 alias 对象：const path = require('path'); module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src'), '@api': path.resolve(__dirname, 'src/api') } } }; - 进 WebStorm 设置 →
Languages & Frameworks → JavaScript → Webpack，把配置文件指向这个alias.config.js - 重启 WebStorm 或至少重载 Webpack 配置（右上角
Reload configuration） - 注意：这个文件对构建无任何影响，只服务 IDE；多个项目需各自配一份
本地安装的 webpack 没被识别？别碰全局命令
WebStorm 默认调用系统 PATH 下的 webpack 命令，但你项目里很可能只装了 webpack-cli，没装 webpack 本体——它们现在是两个包。
- 执行
npm install --save-dev webpack webpack-cli（或pnpm add -D webpack webpack-cli） - 运行配置选
Node.js类型，JavaScript file填node_modules/webpack-cli/bin/cli.js -
Application parameters填--config webpack.config.js --mode development - 千万别用 “Command Line” 或 “Shell Script” 类型配置，容易误走全局环境
最常被忽略的一点：WebStorm 的 TypeScript 路径映射和 Webpack 别名是两套独立系统，哪怕 Webpack 运行 perfectly，编辑器仍可能标红——必须双端同步配置，且每次改完 tsconfig.json 都要手动重启 TS 服务。
