PhpStorm 要深度集成 Webpack，必须满足三要素：webpack.config.js 与 package.json 同级（或手动指定路径并重载）、本地安装 webpack 包（非仅 webpack-cli）、devServer.hot 为 true 且 watchFiles 覆盖源码路径。
PhpStorm 能自动识别并深度集成 Webpack，但前提是配置文件位置、依赖安装和 DevServer 设置都对得上；否则你看到的只是“能跑”，而不是“有提示、能跳转、热更新生效”。
webpack.config.js 放错位置，PhpStorm 根本不认
PhpStorm 默认只扫描项目根目录（即 package.json 所在目录）下的 webpack.config.js、webpack.config.cjs 或 webpack.config.mjs。如果把它丢进 config/ 或 build/ 子目录里，IDE 就当它不存在——loader 解析失效、alias 跳转失灵、HMR 也挂了。
- 最稳妥的做法：把
webpack.config.js移到和package.json同级 - 非放不可在子目录？去 Settings → Languages & Frameworks → JavaScript → Webpack，手动指定配置路径
- 改完必须点右上角 Reload configuration，否则缓存还在用旧规则
- 不支持通配符或多个入口，只能填一个具体文件路径
运行时报 “Cannot find module ‘webpack’”
这不是没装 webpack-cli，而是 PhpStorm 默认调用全局 webpack 命令，而你本地项目里很可能只装了 CLI，没装 webpack 本身——Webpack 5+ 已把这两者拆成独立包。
- 执行
npm install --save-dev webpack webpack-cli（或pnpm add -D webpack webpack-cli） - 在 Run Configuration → Webpack 里，把
webpack package指向本地路径：node_modules/webpack/bin/webpack.js - 用 pnpm 的话路径是
node_modules/.pnpm/webpack@5.92.1/node_modules/webpack/bin/webpack.js，别抄错版本号
HMR 不生效，改代码浏览器没反应
PhpStorm 里的 “Use Hot Swap” 开关只是个触发器，真正决定是否热更新的是 webpack.config.js 里 devServer 的配置。光勾 IDE 选项没用。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“PHP免费学习笔记（深入）”；
-
devServer.hot必须显式设为true（Webpack 5+ 默认开启，但老项目可能关着） -
devServer.watchFiles如果指定了，得覆盖你实际编辑的路径，比如['src/**/*', 'public/**/*']；漏掉某个目录，改了也不触发 - 别依赖
devServer.liveReload: true—— 它是整页刷新，不是 HMR，IDE 的 Hot Swap 对它无效 - React 项目要加
@pmmmwh/react-refresh-webpack-plugin，否则函数组件修改后不会局部更新
TypeScript import 提示 “Cannot resolve symbol”
Webpack 配置正常、项目能跑通，但 PhpStorm 里 Ctrl+Click 进不去模块，大概率是 tsconfig.json 的路径解析没被 IDE 正确读取。
- 确保
tsconfig.json在项目根目录，且compilerOptions.baseUrl和paths配置合法 - PhpStorm 会读
tsconfig.json来辅助跳转，但它不自动继承 Webpack 的resolve.alias，两者要对齐 - 如果用了
baseUrl: "./src"，那import Button from 'components/Button'才能被识别；否则得写相对路径 - 改完
tsconfig.json后，在 PhpStorm 里按Ctrl+Shift+O（File → Synchronize）强制重载 TypeScript 服务
最容易被忽略的是：Webpack 配置文件路径、本地 webpack 包安装、以及 devServer.hot 和 watchFiles 的联动关系——三者缺一，HMR 和模块跳转就断在某个环节，但错误日志往往不报，只表现为“功能静默失效”。
