一、基础认知：Webpack 版本管理的重要性
在现代前端工程化体系中，Webpack 作为核心的模块打包工具，其版本直接影响构建行为、插件兼容性与性能表现。随着项目迭代和团队协作的深入，不同项目可能依赖不同版本的 Webpack，因此准确识别当前项目所使用的 Webpack 版本成为开发与调试的前提。
尤其当全局（global）与本地（local）均安装了 Webpack 时，执行 webpack --version 可能返回全局版本，而非项目实际依赖的本地版本，这极易导致配置不一致、构建失败或难以复现的问题。
二、查看 Webpack 版本的常用方法
使用命令行直接查询：
执行 npx webpack --version 是最推荐的方式。npx 会优先查找当前项目的 node_modules/.bin 目录中的可执行文件，确保调用的是本地安装的 Webpack。检查 package.json 文件：
打开项目根目录下的 package.json，查找 dependencies 或 devDependencies 中关于 webpack 的条目：
{
"devDependencies": {
"webpack": "^5.88.0",
"webpack-cli": "^5.1.4"
}
}
该方式适用于静态查看声明版本，但需注意：声明版本（如 ^5.88.0）与实际安装版本可能存在差异，应结合 lock 文件确认。
三、深入分析：为何 webpack --version 显示全局版本？
当用户直接运行 webpack --version 而未使用 npx 时，系统将根据 PATH 环境变量查找可执行文件。若全局安装了 Webpack（通过 npm install -g webpack），则 Shell 会优先调用全局 bin 路径下的命令，而非项目本地的 node_modules/.bin/webpack。
调用方式查找路径结果倾向webpack --versionPATH 环境变量（含全局 npm bin）全局版本npx webpack --version先查本地 node_modules/.bin，再 fallback 到全局本地优先./node_modules/.bin/webpack --version绝对路径调用精确本地版本
四、精准确认本地 Webpack 实际安装版本
除了查看 package.json，更可靠的方法是读取 package-lock.json 或使用 npm 命令查询已安装模块的实际版本：
npm list webpack
该命令递归显示当前项目中所有层级的 Webpack 安装情况，包括主依赖与子依赖引入的版本，输出示例如下：
my-project@1.0.0 /path/to/project
└── webpack@5.88.0
// 若存在多版本嵌套：
├── some-plugin@1.2.0
│ └── webpack@4.47.0
此信息对于排查“多个 Webpack 实例共存”引发的兼容性问题至关重要。
五、自动化检测与 CI/CD 集成建议
在团队协作或多项目环境中，可通过脚本统一校验 Webpack 版本一致性。以下为一个简单的检测脚本示例：
#!/usr/bin/env node
const execSync = require('child_process').execSync;
try {
const version = execSync('npx webpack --version', { encoding: 'utf8' }).trim();
console.log(`✅ 当前项目使用的 Webpack 版本: ${version}`);
} catch (err) {
console.error('❌ 无法获取本地 Webpack 版本，请检查是否已安装。');
process.exit(1);
}
此外，在 CI 流程中加入版本断言步骤，可防止因环境差异导致的构建漂移。
六、流程图：确定 Webpack 版本的决策路径
graph TD
A[开始] --> B{是否安装 npx?}
B -->|是| C[执行 npx webpack --version]
B -->|否| D[手动进入 node_modules/.bin/ 运行]
C --> E[获取本地版本]
D --> E
E --> F{版本是否符合预期?}
F -->|是| G[继续开发]
F -->|否| H[检查 package.json & lock 文件]
H --> I[重新安装指定版本]
I --> C
该流程图清晰展示了从初步尝试到最终确认的完整路径，适用于新成员快速上手和故障排查场景。