VSCode本身不配置Node或Webpack环境，仅调用终端执行命令；真正构建由Webpack CLI完成，关键在于确保终端能正确加载Node、本地安装依赖、路径合法且webpack.config.js符合CommonJS导出规范。
VSCode 本身不配 Node 环境，只用它跑命令
VSCode 不会“配置” Node 或 Webpack 环境，它只是个编辑器。所谓“配置”，其实是确保你的项目能被 Node 正确加载、Webpack 能在终端里正常执行。关键不是改 VSCode 设置，而是让 npm run build 在集成终端里能跑通。
常见错误现象：command not found: webpack、ERR_MODULE_NOT_FOUND、点“运行任务”没反应、webpack.config.js 有波浪线但没提示路径错误。
- 检查终端是否真在 Node 环境：Ctrl+` 打开集成终端，输入
node -v和npm -v，必须有输出；若报错或无响应，说明终端没继承系统 PATH，需在 VSCode 设置里搜terminal.integrated.defaultProfile，Windows 用户优先选Command Prompt或Git Bash，别用默认 PowerShell（常因执行策略被拦截） - 确认
webpack和webpack-cli是本地安装（--save-dev），不是全局装的：ls node_modules/webpack*（macOS/Linux）或dir node_modules\webpack*（Windows）应能看到目录 - 项目路径不能含中文、空格、括号等字符（如
D:\我的项目\app），否则__dirname解析失败，Webpack 静默退出
webpack.config.js 必须放对位置、导出方式要对
VSCode 的语法提示、任务探测、插件支持，全依赖这个文件“存在且合法”。它不执行配置，但必须能被静态识别。
- 文件必须和
package.json同级，放在项目根目录（即你用 VSCode “打开文件夹”时看到的那个最外层文件夹） - 文件名只能是
webpack.config.js（.cjs也可，但.ts默认不认，除非额外配ts-node） - 导出必须用
module.exports = { ... }，不要用export default—— 多数插件（包括官方 “webpack” 插件）读不到 ES Module 导出 - 如果用了
path.resolve()，开头必须有const path = require("path")，否则路径补全和类型提示失效
用 tasks.json 封装 npm script，别写裸 webpack 命令
VSCode 的“运行任务”本质就是调终端执行 shell 命令。tasks.json 是封装入口，不是替代 package.json 脚本。
- 推荐写法：
"command": "npm run build"，前提是package.json的scripts里有"build": "webpack"—— 这样能复用node_modules/.bin和环境变量 - 避免写
"command": "webpack"：裸命令不走本地node_modules/.bin，容易报command not found -
"isBackground": true只用于监听类任务（如webpack --watch），普通构建必须删掉或设为false，否则 VSCode 卡在“正在运行任务”不动 - 加
"group": "build"后，可绑定快捷键Ctrl+Shift+B直接触发；再配"problemMatcher": ["$webpack"]（需已装官方 “webpack” 插件），错误能跳转到源码行
调试 Webpack 配置本身，得让 Node 进程可调试
改完 webpack.config.js 没反应？loader 不生效？plugin 没触发？光看终端日志不够，得进调试器单步看 config 加载和 plugin 执行流程。
- 把
package.json的build脚本改成："build": "node --inspect-brk=5858 ./node_modules/webpack/bin/webpack.js --config webpack.config.js" -
launch.json中runtimeExecutable设为node，runtimeArgs拆解传上面那串参数（别包在npm run里，否则调试端口失效） - 断点打在
webpack.config.js顶层（验证 config 是否被加载），或 plugin 的apply(compiler)开头（Webpack 初始化第一件事就是调这个） - loader 断点要打在函数体内部，且确认
module.rules的test正则真能匹配到目标文件路径（注意 Windows 下路径分隔符是\，Webpack 内部统一转成/）
真正卡住的地方往往不是配置写错，而是路径不对、导出方式不兼容、终端环境没继承 Node、或者调试时没意识到 loader/plugin 的执行时机差异 —— 这些细节不踩一遍，很难靠文档猜出来。
