PhpStorm不运行Webpack，仅读取配置提供跳转和HMR支持；失效主因是路径错误、本地未安装webpack包或IDE缓存未刷新。
PhpStorm 本身不运行 Webpack，它只读取配置、提供跳转和 HMR 支持；配置失效的根源几乎都出在路径、包安装或 IDE 缓存上。
webpack.config.js 不被识别？检查文件位置和 PhpStorm 扫描范围
PhpStorm 默认只认项目根目录（即 package.json 所在目录）下的 webpack.config.js、webpack.config.cjs 或 webpack.config.mjs。放在 config/ 或 build/ 子目录里，IDE 就当它不存在。
- 最稳妥做法：把
webpack.config.js移到和package.json同级目录 - 必须放子目录？去
Settings → Languages & Frameworks → JavaScript → Webpack手动指定完整路径，比如config/webpack.config.js - 改完路径后，务必点击右上角 Reload configuration 按钮——缓存不刷新，配置还是旧的
- 别用 glob（如
config/webpack.*.js），PhpStorm 不支持多入口配置文件
“Cannot find module ‘webpack’”？本地没装 webpack 包，不是 CLI 的问题
这个报错常被误认为是没装 webpack-cli，其实是因为 PhpStorm 默认调用全局 webpack 命令，而你项目里只装了 CLI，漏掉了核心包 webpack 本身。
- 执行
npm install --save-dev webpack webpack-cli（pnpm用户对应用pnpm add -D webpack webpack-cli） - Run Configuration 中的
webpack package路径要指向本地node_modules下的 bin 文件：node_modules/webpack/bin/webpack.js -
pnpm项目路径会是类似node_modules/.pnpm/webpack@5.92.1/node_modules/webpack/bin/webpack.js，不能偷懒填全局路径 - 确认
package.json的devDependencies里确实有"webpack"字段，且版本号不为0.0.0
HMR 不生效？IDE 的 “Hot Swap” 开关只是摆设，关键看 webpack 配置
PhpStorm 里勾选了 “Use Hot Swap”，但改代码浏览器没反应——这说明 devServer 根本没启用 HMR，或者监听路径漏了源码目录。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“PHP免费学习笔记（深入）”；
-
devServer.hot必须显式设为true（Webpack 5+ 默认是true，但老项目或自定义 config 可能关着） -
devServer.watchFiles如果用了，得包含实际编辑的路径，例如['src/**/*', 'public/**/*']；只写['src/index.js']是无效的 - 别混淆
liveReload: true和 HMR：liveReload是整页刷新，hot: true才是模块热替换，IDE 的 “Hot Swap” 只对后者起作用 - React 项目必须加
@pmmmwh/react-refresh-webpack-plugin插件，否则函数组件更新不触发 HMR
TypeScript 别名（如 @/utils）标红？PhpStorm 和 tsc 解析路径不一致
TS 编译器靠 tsconfig.json 的 baseUrl + paths 解析，而 PhpStorm 默认只认相对路径和 node_modules，不自动读取 TS 配置做路径映射。
- 确保
tsconfig.json里有正确配置：{"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}}} - 在 PhpStorm 中，
Settings → Languages & Frameworks → TypeScript的TypeScript version选Project default，别手动指错路径（应指向node_modules/typescript/lib，不是tsc可执行文件） - 如果用了 Webpack 的
resolve.alias，也要同步配到tsconfig.json，PhpStorm 不读 Webpack 配置里的 alias - 重启 IDE 或执行
File → Invalidate Caches and Restart，有时路径缓存卡住会导致 alias 长期不生效
最容易被忽略的是：Webpack 配置改了，但没点 Reload；webpack 包装了，但 Run Configuration 还指向全局命令；TS 路径写了，但 PhpStorm 的 TypeScript 设置里版本路径填错了 lib 目录。这些地方一错，整个前端开发流就断在 IDE 层，而不是代码层。
