Windows system怎么配置Webpack打包前端静态资源-Windows系列-PHP中文网

需先安装Node.js并验证node -v与npm -v，再创建项目、安装webpack本地依赖，编写src/index.js入口文件和webpack.config.js配置文件，最后通过npm run build执行打包。

windows system怎么配置webpack打包前端静态资源

在 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：

内容只需一行：
console.log("Webpack 打包成功");

windows-auto

Windows 桌面自动化技能，支持鼠标控制（移动/点击/拖拽/滚轮/截图）、键盘输入（文字输入/按键/组合键）、窗口管理（查找/聚焦/最大化/最小化/关闭/移动）、截图并发送文件。提供两种截图方式：Python pyautogui 截图（集成在自动化流程中）和 PowerShell + .NET 零依赖截图（支持区域截图和多显示器）。当用户需要自动化 Windows 桌面操作、控制鼠标键盘、管理窗口、执行 GUI 自动化任务、截图发送文件时使用。

下载

这一步不可跳过——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 消失，不利于调试。