VSCode不运行Webpack，仅调用命令；终端执行npm run build等命令，真正构建由Webpack CLI完成。常见问题包括路径含中文、未本地安装依赖、PowerShell策略限制、Shell环境未配置Node PATH等。
VSCode 本身不运行 Webpack，它只负责编辑、调用命令和调试；所谓“运行构建任务”，本质是让 VSCode 终端执行 npm run build 或封装好的 shell 命令，真正干活的是 Webpack CLI。
Webpack 构建任务为什么在 VSCode 终端里不生效？
常见现象：敲 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 更稳
如何用 tasks.json 正确封装 Webpack 构建任务？
别写 "command": "webpack" 这种裸命令，它不走 node_modules/.bin，也不继承 npm 脚本环境变量。
- 推荐写法：
"command": "npm run build"，前提是package.json里有"build": "webpack"这一行 -
"isBackground": true仅用于监听类任务（如webpack --watch），普通构建必须设为false或删掉该字段，否则 VSCode 卡在“正在运行任务”不动 - 加
"group": "build"后，可绑定快捷键Ctrl+Shift+B直接触发 - 想捕获错误并跳转到源码行？加
"problemMatcher": ["$webpack"]，前提是已安装官方 “webpack” 插件
为什么 Webpack 配置修改后 VSCode 不提示语法错误？
VSCode 不主动解析 webpack.config.js，除非你让它知道这文件存在且合法。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 文件必须放在项目根目录（和
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 自身配置时断点不命中？
不是代码写错了，而是没进调试上下文——你调试的是业务代码，不是 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 } }
真正难的不是写配置，而是分清哪段逻辑由 VSCode 承担、哪段由 Webpack CLI 承担；一旦混淆，所有“自动”都会变成“手动排查”。
