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 链的执行流。