PhpStorm深度集成Webpack需三者对齐：配置文件须与package.json同级、本地安装webpack及webpack-cli、IDE中正确指定路径并重载；否则import跳转、HMR、别名解析均失效。
PhpStorm 能自动识别并深度集成 Webpack，但前提是配置文件位置、依赖安装和 IDE 设置三者对齐；缺一不可，否则连 import 跳转、别名解析、HMR 支持都会失效。
webpack.config.js 必须放在项目根目录
PhpStorm 默认只扫描与 package.json 同级的 webpack.config.js（或 webpack.config.cjs、webpack.config.mjs）。如果它在 config/ 或 build/ 子目录里，IDE 压根不会加载，也就没有模块解析、loader 提示、HMR 识别等能力。
- 最稳妥做法：把
webpack.config.js移到项目最外层，和package.json并列 - 若必须放子目录：进
Settings → Languages & Frameworks → JavaScript → Webpack，手动指定完整路径（如config/webpack.config.cjs），然后点右上角 Reload configuration - 注意：只支持单个文件路径，不支持 glob（如
config/**/*.js）或多个配置入口
“Cannot find module ‘webpack’” 是因为没装本地包
这个报错不是缺 CLI，而是 PhpStorm 默认调用全局 webpack 命令，但你项目里很可能只装了 webpack-cli，没装 webpack 本体——从 Webpack 5 起，二者已拆分为独立包。
- 运行
npm install --save-dev webpack webpack-cli（或pnpm add -D webpack webpack-cli） - 在 Run Configuration 中，不要选 “Command Line”，改用
Node.js类型配置：
–JavaScript file填node_modules/webpack-cli/bin/cli.js
–Application parameters填--config webpack.config.js --mode development
–Node interpreter选项目所用 Node 版本（非系统默认） - 如果用 pnpm，路径实际是
node_modules/.pnpm/webpack@5.92.1/node_modules/webpack-cli/bin/cli.js，需手动补全
HMR 不生效？检查 devServer.hot 和 watchFiles
PhpStorm 的 “Hot Swap” 开关只是触发器，真正决定是否热更新的是 webpack.config.js 里的 devServer 配置。光勾选 IDE 选项毫无作用。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“PHP免费学习笔记（深入）”；
-
devServer.hot必须为true（Webpack 5+ 默认开启，但老项目可能显式设为false） -
devServer.watchFiles如果设置了，必须包含你编辑的源码路径，例如['src/**/*', 'public/**/*']；漏掉任意一类路径，变更就不会触发重编译 - 别依赖
devServer.liveReload: true—— 它是整页刷新，不是 HMR；IDE 的 Hot Swap 只响应 HMR 事件 - React 项目还需加
@pmmmwh/react-refresh-webpack-plugin，否则函数组件修改不触发更新
TypeScript import 提示 “Cannot resolve symbol”？检查 tsconfig.json 与 Webpack alias 对齐
PhpStorm 的模块跳转依赖 Webpack 解析规则，而 TypeScript 的路径映射（baseUrl / paths）必须和 Webpack 的 resolve.alias 或 resolve.modules 一致，否则 IDE 会“看到两套路径逻辑”，导致跳转失败。
- 确保
tsconfig.json的compilerOptions.baseUrl和 Webpack 的resolve.modules都指向src或./ - 如果用了
paths别名（如@/*→src/*），Webpack 里也要配resolve.alias: { '@': path.resolve(__dirname, 'src') } - PhpStorm 读取的是 Webpack 配置解析结果，不是 tsconfig；即使 tsconfig 正确，Webpack 没配 alias，IDE 就无法跳转
最容易被忽略的是：Webpack 配置文件位置错误 + 本地未安装 webpack 包，这两项叠加会导致整个前端支持链断裂——从代码提示、跳转、HMR 到构建运行全部失灵，且错误信息分散，容易误判为插件问题或缓存问题。
