vscode 不配置 webpack，需手动创建 webpack.config.js 并配置 package.json 脚本；路径须纯英文，入口出口用绝对路径，安装依赖后通过 npm run build 执行。
直接上结论：VSCode 本身不“配置” Webpack，它只负责编辑和运行命令；真正要配的是项目级的 webpack.config.js + package.json 脚本，再配合终端执行。别在 VSCode 设置里找“Webpack 配置开关”，那条路走不通。
初始化项目并安装 Webpack 依赖
必须从 npm 初始化开始，否则后续所有配置都缺根。注意路径不能含中文、空格或特殊符号，否则 webpack 会静默失败或报 ERR_MODULE_NOT_FOUND。
- 在 VSCode 中打开一个纯英文路径的空文件夹（比如
D:\projects\my-webpack-app） - 打开集成终端（
Ctrl+`），运行：npm init -y - 安装 Webpack 及 CLI（不要全局安装）：
npm install --save-dev webpack webpack-cli - 验证是否装对：
npx webpack --version应输出版本号（如5.94.0）
写好 webpack.config.js 并指定入口出口
这个文件是 Webpack 的“大脑”，VSCode 不生成它，你得手动创建。放在项目根目录，和 package.json 同级。常见错误是路径写错或漏掉 path.resolve()。
- 入口（
entry）必须是绝对路径，推荐用path.resolve(__dirname, "src/index.js")，别写相对路径"./src/index.js" - 出口（
output.path）也必须是绝对路径，output.filename建议设为"[name].bundle.js"方便后期扩展 - 如果用 ES6 模块，加
mode: "development"或"production"，否则 Webpack 5 会警告
const path = require("path");
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "src/index.js"),
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
}
};
用 package.json 脚本替代命令行输入
没人会天天敲 npx webpack --config webpack.config.js。把命令塞进 package.json 的 scripts 里，VSCode 终端里直接 npm run build 就行。
- 在
scripts中加一行："build": "webpack"（默认自动读取webpack.config.js） - 想看详细日志？改成：
"build": "webpack --stats verbose" - 开发时需要监听变化？加个
"watch": "webpack --watch"，保存即重打包
VSCode 终端与调试支持要点
VSCode 的终端就是系统 shell，但有几个关键点影响体验：
- 确保终端 shell 是 Node.js 环境（Windows 用户注意：别用 PowerShell 默认配置，改用 Command Prompt 或 Git Bash；可在设置里搜
terminal.integrated.defaultProfile调整） -
webpack-dev-server需单独安装：npm install --save-dev webpack-dev-server，然后加脚本"dev": "webpack serve" - 如果调试 Webpack 配置本身（比如插件行为异常），直接在
webpack.config.js里加debugger，再用 VSCode 的 Node.js 调试器 attach 到npx webpack进程（需配置.vscode/launch.json）
最常被跳过的一步是检查 node_modules/.bin 是否真有 webpack 可执行文件——删掉 node_modules 和 package-lock.json 重装一次，比猜配置快得多。
