VSCode运行Webpack构建任务 - 前端工程化实践指南-VSCode-PHP中文网

vscode不运行webpack，仅调用命令；终端执行npm run build等命令，真正构建由webpack cli完成。常见问题包括路径含中文、未本地安装依赖、powershell策略限制、shell环境未配置node path等。

vscode运行webpack构建任务 - 前端工程化实践指南

VSCode 本身不运行 Webpack，它只负责编辑、调用命令和调试；所谓“运行构建任务”，本质是让 VSCode 终端执行 npm run build 或封装好的 shell 命令，真正干活的是 Webpack CLI。

常见现象：敲 npm run build 没反应、报错 command not found: webpack、或提示 ERR_MODULE_NOT_FOUND。

项目路径含中文、空格或特殊符号（如 D:\我的项目\app）→ Webpack 解析 __dirname 失败，静默退出
webpack 和 webpack-cli 只装了全局版，但项目里没装 --save-dev → npx 找不到本地二进制
Windows 上 PowerShell 默认策略禁止脚本执行，报错 webpack.ps1 cannot be loaded → 需运行 set-ExecutionPolicy RemoteSigned -Scope CurrentUser
终端 shell 不是 Node.js 环境（比如 VSCode 默认开了 PowerShell，但没配好 Node PATH）→ 切换到 Command Prompt 或 Git Bash 更稳

别写 "command": "webpack" 这种裸命令，它不走 node_modules/.bin，也不继承 npm 脚本环境变量。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

推荐写法："command": "npm run build"，前提是 package.json 里有 "build": "webpack" 这一行
"isBackground": true 仅用于监听类任务（如 webpack --watch），普通构建必须设为 false 或删掉该字段，否则 VSCode 卡在“正在运行任务”不动
加 "group": "build" 后，可绑定快捷键 Ctrl+Shift+B 直接触发
想捕获错误并跳转到源码行？加 "problemMatcher": ["$webpack"]，前提是已安装官方 “webpack” 插件

VSCode 不主动解析 webpack.config.js，除非你让它知道这文件存在且合法。

文件必须放在项目根目录（和 package.json 同级），名字必须是 webpack.config.js（.cjs 也行，.ts 不行，除非额外配 ts-node）
导出必须用 module.exports = { ... }，ESM 的 export default 会让部分插件读取失败
如果用了 path.resolve()，确保 const path = require('path') 已声明，否则类型提示和路径补全失效
装个 “webpack” 插件（publisher: jasonnutter），它会激活 webpack.config.js 的语法高亮、智能提示和任务探测

不是代码写错了，而是没进调试上下文——你调试的是业务代码，不是 Webpack 启动流程。

把 package.json 的构建脚本改成："debug-build": "node --inspect-brk=9229 ./node_modules/webpack/bin/webpack.js --config webpack.config.js"
launch.json 中 runtimeExecutable 设为 "node"，不是 "npm"；runtimeArgs 拆成数组：["--inspect-brk=9229", "./node_modules/webpack/bin/webpack.js", "--config", "webpack.config.js"]
断点打在 webpack.config.js 文件最顶部，或插件 apply(compiler) 方法第一行——Webpack 加载 config 是启动第一步
loader/plugin 内部断点无效？因为多数 loader（如 babel-loader）开子进程跑，需临时关 cache：{ loader: 'babel-loader', options: { cache: false } }