Webpack配置文件需置于项目根目录才能被WebStorm识别；若在子目录，须手动配置Node.js运行参数并指定完整路径；本地安装webpack和webpack-cli、启用--watch或webpack-dev-server、添加stats:'verbose'可提升调试效率。
Webpack 配置文件没被 WebStorm 识别？检查 webpack.config.js 是否在项目根目录
WebStorm 不会自动“发现” Webpack，它只会在项目根目录下检测到 webpack.config.js（或 webpack.config.cjs、webpack.config.mjs）时，才启用对应的语言支持和运行配置。如果文件放在 config/ 或 build/ 子目录里，WebStorm 默认不认。
- 把
webpack.config.js移到项目最外层目录（即package.json所在位置） - 如果必须放子目录，手动在
Run > Edit Configurations…中新增 Node.js 配置，设置Working directory为项目根目录，JavaScript file填完整路径，例如config/webpack.config.js - 确保
webpack和webpack-cli已安装在本地node_modules（不是全局），否则 WebStorm 的运行配置会报Cannot find module 'webpack'
点 Run 按钮却报错 command not found: webpack？别用 Terminal 直接跑，改用 WebStorm 内置的 Node.js 运行配置
很多人习惯在 Terminal 里敲 npx webpack，但 WebStorm 的绿色三角按钮默认调用的是系统 PATH 下的 webpack 命令——而本地安装的 webpack 只在 npx 或 npm run 下可用。
- 删掉所有基于 “Command Line” 或 “Shell Script” 的旧配置
- 新建
Run Configuration > Node.js，填入：
–JavaScript file:node_modules/webpack-cli/bin/cli.js
–Application parameters:--config webpack.config.js --mode development
–Node interpreter: 选你项目使用的 Node 版本（不是系统默认） - 更省事的做法：用
NPM类型配置，package.json script选build，这样完全复用package.json里的"build": "webpack --mode production"
修改代码后要手动点 Run？开启 Webpack 的 watch 模式，但别依赖 WebStorm 自带的 File Watcher
WebStorm 的 File Watcher 插件对 Webpack 支持有限，容易漏触发、卡死或重复编译。真正稳定的热构建得靠 Webpack 自身的 --watch 或 webpack-dev-server。
- 在 Node.js 运行配置中，把
Application parameters改成：--config webpack.config.js --mode development --watch - 如果需要浏览器自动刷新，直接配
webpack-dev-server：新建 NPM 配置，脚本选dev（对应"dev": "webpack serve --mode development"），比自己搭 watch + live-reload 更可靠 - 注意：开启
--watch后，WebStorm 的 “Stop” 按钮有时无法干净退出进程，建议用终端kill -9或关掉整个 Run 窗口
调试 Webpack 配置本身（比如 loader 不生效）？加 stats: 'verbose' 并看 Console 输出细节
Webpack 构建失败但控制台只显示 ERROR in ./src/index.js，这种模糊错误基本是因为 loader 或 resolve 规则写错了。WebStorm 的 Console 能显示完整日志，但默认级别太低。
- 在
webpack.config.js的module.exports里临时加上：stats: 'verbose'，再运行，就能看到每个模块用了哪个 loader、是否命中 test 正则、有没有 fallback - 如果 loader 报
Cannot find module 'babel-loader'，不是没装，而是 WebStorm 当前运行配置的Node interpreter指向了错误的 Node 环境，导致找不到本地node_modules - loader 链中如果有异步操作（比如
css-loader里@import），出错位置可能跳转到生成的 bundle 里，这时候得回退看原始文件路径和resolve.alias是否冲突
Webpack 配置本质是 JS 代码，WebStorm 能提示语法、跳转、重命名，但 loader 行为、插件执行时机、模块解析顺序这些，全靠输出日志和实际打包结果反推——别指望 IDE 能替你理解 loader 链的执行流。
