需先安装Node.js并验证node -v与npm -v，再创建项目、安装webpack本地依赖，编写src/index.js入口文件和webpack.config.js配置文件，最后通过npm run build执行打包。
在 Windows 系统中完成 Webpack 打包前端静态资源，需从 Node.js 环境准备、项目初始化、配置文件编写到最终执行构建全流程落地，漏掉任一环节都会导致 webpack 命令无法识别或打包失败。
安装 Node.js 并验证 npm 环境
前往 Node.js 官网 下载 LTS 版本（推荐 v20.x），双击安装包一路“Next”即可，勾选“Add to PATH”确保环境变量自动写入。
打开新打开的 CMD 或 PowerShell，执行：node -v && npm -v
若返回两个版本号（如 v20.18.0 和 10.8.1），说明安装成功；若提示“不是内部或外部命令”，请重启终端或手动检查系统环境变量中是否包含 Node.js 安装路径（默认如 C:\Program Files\nodejs\）。
立即学习“前端免费学习笔记（深入）”；
创建项目并安装 Webpack 本地依赖
新建空文件夹（例如 my-webpack-project），进入该目录后执行：npm init -y
这会生成 package.json，是后续所有依赖和脚本的管理基础。不运行这一步，npm install 会报错“Not a package”。
执行以下命令安装 Webpack 及 CLI 工具（必须为 开发依赖，即 --save-dev）：npm install webpack webpack-cli --save-dev
注意：全局安装（-g）在现代 Webpack 实践中已被弃用，会导致项目迁移时构建行为不一致，且与 package.json 中定义的版本脱节。
初始化源码结构并编写入口文件
在项目根目录下创建 src 文件夹，并在其中新建 index.js：
Windows 桌面自动化技能，支持鼠标控制（移动/点击/拖拽/滚轮/截图）、键盘输入（文字输入/按键/组合键）、窗口管理（查找/聚焦/最大化/最小化/关闭/移动）、截图并发送文件。提供两种截图方式：Python pyautogui 截图（集成在自动化流程中）和 PowerShell + .NET 零依赖截图（支持区域截图和多显示器）。当用户需要自动化 Windows 桌面操作、控制鼠标键盘、管理窗口、执行 GUI 自动化任务、截图发送文件时使用。
内容只需一行：console.log("Webpack 打包成功");
这一步不可跳过——Webpack 默认查找 ./src/index.js 作为入口。若无此文件或路径不符，运行构建时会报错 Cannot find module './src'。
编写 webpack.config.js 配置文件
在项目根目录下新建文件 webpack.config.js，写入以下内容：
const path = require("path");<br>module.exports = {<br> mode: "development",<br> entry: "./src/index.js",<br> output: {<br> filename: "bundle.js",<br> path: path.resolve(__dirname, "dist")<br> }<br>};
关键点：【mode 必须显式声明】，否则 Webpack 5+ 会警告并默认设为 production，导致代码被压缩、console 消失，不利于调试。
配置 npm 构建脚本并执行打包
打开 package.json，在 "scripts" 字段中添加："build": "webpack"
此时 "scripts" 应类似："scripts": { "build": "webpack" }
保存后，在终端中执行：npm run build
成功时将输出类似信息：asset bundle.js 1.15 KiB [emitted] (name: main)
同时生成 dist/bundle.js 文件。
