如何查看webpack版本|终端指令与项目配置文件都能完成查询

文件都能完成查询

上周深夜改遗留老项目，打包弹窗接连报错，邻座同事隔着工位发消息询问如何查看webpack版本，手边没有留存的操作笔记，只能靠着平日里零散的实操经验临场摸索，桌面散乱地放着几个备份的项目压缩包，光标不停在代码编辑器和系统终端之间来回跳转。

最先下意识在终端敲下webpack -v，黑色控制台直接弹出命令未找到的提示，盯着报错弹窗半晌才回过神，绝大多数前端工程只会在项目本地安装依赖包，并不会把webpack部署在全局环境里，从前新装开发环境时总犯同一个毛病，想当然以为安装过的依赖全都会注册到系统全局变量里，光是在无效指令上反复重试就耗去不少时间，连带打乱原本敲定的项目调试节奏，白白拖延了修复bug的进度。

换了个思路。

在项目的根目录位置打开终端，输入npx webpack -v按下回车，界面瞬间弹出一串版本数字，这串字符就是项目当前正在运行地webpack真实版本，这次打包异常的根源恰好就是本地安装版本和webpack配置文件标注版本互不匹配，配套插件无法兼容新旧版本的API，核对完版本数据之后，故障产生的缘由立马清晰。旁边刚入行的实习生凑过来看操作，随口提起自己平时偏爱打开项目根目录的package.json文档，在devDependencies配置区块里就能找到webpack的版本标注，只是文件中标注的^、~符号会约束实际落地安装的版本，只对照文档文本没法精准确认运行版本，这是他上次项目上线出现兼容故障之后慢慢摸透的细节。

紧接着又输入npm ls webpack执行查询，指令输出的内容会连带依赖层级完整展示，不光能查到主体webpack版本，连带所有依附它的第三方打包插件版本一并罗列，这个老旧项目嵌套了多层打包依赖，各类loader和插件层层关联，这条指令刚好能理顺错综复杂的依赖树，快速排查隐藏在深层依赖里的版本冲突问题。

换成yarn管理依赖的项目不能直接复用npm相关指令，需要改用yarn list webpack查询，早前贪图便利交替混用npm和yarn安装依赖，两种工具的缓存文件互相干扰，先后查出来的版本数据前后矛盾，耗费半天统一项目包管理器之后，版本查询结果才恢复稳定。

倘若项目提前在全局环境安装过webpack，最开始失效的webpack -v指令便能正常输出版本号，区分全局安装和项目本地安装是整项操作里最容易忽略地细节，不少刚接触前端的新手搞混两种安装路径，查到的版本和项目实际生效版本完全脱节，反复修改配置参数也解决不了打包异常。

关掉终端的时候窗外天色泛白，随手把确认好的版本编号潦草写在便签纸上，第二天睁眼第一件事就是替换适配版本的打包依赖。