为什么 webpack -v 不显示版本号

为什么 webpack -v 不显示版本号

webpack -v 命令可以用来显示webpack、webpack-cli、webpack-dev-server的版本信息的，如下：

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 5.63 GB / 15.73 GB
  Binaries:
    Node: 18.18.0 - E:\node-v18.18.0-x64\node.EXE
    npm: 9.8.1 - E:\node-v18.18.0-x64\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.66)
    Internet Explorer: 11.0.19041.3636
  Packages:
    webpack: ^5.90.3 => 5.90.3
    webpack-cli: ^5.1.4 => 5.1.4
    webpack-dev-server: ^5.0.2 => 5.0.2

但是有时候 webpack -v的输出缺少上面的 Packages 项，很多博客中都说是这是因为没有安装成功，其实用户已经成功了。

问题的关键所在是因为 webpack -v命令是从package.json中读取配置信息的，而全局安装的webpack所在的文件夹没有相应的package.json文件，所以输出没有Packages 项。

  System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 6.04 GB / 15.73 GB
  Binaries:
    Node: 18.18.0 - E:\node-v18.18.0-x64\node.EXE
    npm: 9.8.1 - E:\node-v18.18.0-x64\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.66)
    Internet Explorer: 11.0.19041.3636

我们可以做一个实验：

1. 新建一个文件夹——tt

2. cd  tt，然后 npm init 初始这个文件夹，此时package.json 中的 dependencies、devDependencies 不存在或为空。

3.  npm  install webpack webpack-cli webpack-dev-server，下载到当前项目的 dependencies中（下载到 devDependencies 中也可以）；

4. npx webpack -v，执行当前项目的webpackml，输出相应的包信息。

  System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 5.90 GB / 15.73 GB
  Binaries:
    Node: 18.18.0 - E:\node-v18.18.0-x64\node.EXE
    npm: 9.8.1 - E:\node-v18.18.0-x64\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.66)
    Internet Explorer: 11.0.19041.3636
  Packages:
    webpack: ^5.90.3 => 5.90.3
    webpack-cli: ^5.1.4 => 5.1.4
    webpack-dev-server: ^5.0.2 => 5.0.2

我们还可以做其他的一些实验：

1. 将上面的package.json文件拷贝到全局模块的文件夹中，然后 webpack -v 也会有输出；

其他问题解答：

vue3 集成了webpack，所以我们下载vue3时也会下载 webpack，但是webpack是作为vue的依赖包存在的，不是当前项目的直接依赖包，所以当前项目的 package.json的dependencies 中不会存在webpack版本信息。