如何确定已安装的 webpack 版本

Posted 2023-03-07

【中文标题】如何确定已安装的 webpack 版本

【英文标题】：How to determine the installed webpack version

【发布时间】：2017-05-30 09:44:21

【问题描述】：

特别是在从 webpack v1 到 v2 的过渡期间，以编程方式确定安装了哪个 webpack 版本非常重要，但我似乎找不到合适的 API。

【参考方案1】：

安装的版本：

使用webpack CLI：(--version, -v Show version number [boolean])

webpack --version

或：

webpack -v

使用npm list 命令：

npm list webpack

name@version-range 中的结果：

<projectName>@<projectVersion> /path/to/project
└── webpack@<version-range>

使用yarn list 命令：

yarn list webpack

---

如何以编程方式进行？

Webpack 2 引入了Configuration Types。

您可以返回一个函数，而不是导出配置对象 它接受一个环境作为参数。运行 webpack 时，你 可以通过--env指定构建环境密钥，如--env.production 或--env.platform=web。

我们将使用名为 --env.version 的构建环境密钥。

webpack --env.version $(webpack --version)

或：

webpack --env.version $(webpack -v)

为此，我们需要做两件事：

更改我们的webpack.config.js 文件并使用DefinePlugin。

DefinePlugin 允许您创建全局常量 在编译时配置。

-module.exports = 
+module.exports = function(env) 
+  return 
    plugins: [
      new webpack.DefinePlugin(
+        WEBPACK_VERSION: JSON.stringify(env.version) //<version-range>
      )
    ]
+  ;
;

现在我们可以像这样访问全局常量了：

console.log(WEBPACK_VERSION);

---

可用的最新版本：

使用npm view 命令将返回注册表中可用的最新版本：

npm view [<@scope>/]<name>[@<version>] [<field>[.<subfield>]...]

---

对于 webpack 使用：

npm view webpack version

【讨论】：

所以 webpack 没有返回其版本的 API，我必须使用 shell 命令？

这可以通过 cli 正常工作....但是如何以编程方式执行此操作？ （又名：在脚本文件中）

我已经包含了一种以编程方式提取 webpack 版本并将其用作任何文件中的全局常量的方法。

好吧，我必须输入npx webpack --version

@doberkofler 有（现在正确的）答案，它甚至被标记为正确答案！ ***.com/a/52143627/3221576 您不能依赖 webpack -v，因为这假定您当前的 shell 的 webpack 与您程序中运行的相同。

【参考方案2】：

对于那些正在使用yarn的人

yarn list webpack 可以解决问题

$ yarn list webpack
yarn list v0.27.5
└─ webpack@2.6.1
Done in 1.24s.

【参考方案3】：

只是另一种尚未提及的方式：

如果您将其安装到本地项目中，则打开 node_modules 文件夹并检查您的 webpack 模块。

$cd /node_modules/webpack/package.json

打开package.json文件，查看版本

【讨论】：

我确定你可以cd 成文件

【参考方案4】：

webpack 4 现在提供了一个可以使用的版本属性！

【讨论】：

这意味着无论您在哪里提供了webpack 变量（就像在您的设置/配置文件中一样），您都可以调用webpack.version，您将得到一个版本字符串形式"x.y.z".

【参考方案5】：

如果使用 Angular CLI v7+，webpack 版本会打印在 ng version 的输出中：

-> ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.0.6
Node: 11.0.0
OS: darwin x64
Angular: 7.1.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.6
@angular-devkit/build-angular     0.10.6
@angular-devkit/build-optimizer   0.10.6
@angular-devkit/build-webpack     0.10.6
@angular-devkit/core              7.0.6
@angular-devkit/schematics        7.0.6
@angular/cli                      7.0.6
@ngtools/webpack                  7.0.6
@schematics/angular               7.0.6
@schematics/update                0.10.6
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

【讨论】：

在 Angular 10 中，webpack 没有以ng version 列出。如果你使用 @angular-builders/custom-webpack 的自定义 webpack 配置，试试 npm list webpack，它显示了 webpack 的使用版本。

【参考方案6】：

将webpack -v 放入您的package.json：

  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "build": "webpack -v",
    "dev": "webpack --watch"
  

然后在控制台输入：

npm run build

预期输出应如下所示：

> npm run build

> js@1.0.0 build /home/user/repositories/myproject/js
> webpack -v

4.42.0

【参考方案7】：

在 CLI 中

$ webpack --version
    
webpack-cli 4.1.0
    
webpack 5.3.2

在代码中（节点运行时）

process.env.npm_package_devDependencies_webpack // ^5.3.2

或

process.env.npm_package_dependencies_webpack // ^5.3.2

在插件中

compiler.webpack.version // 5.3.2