如何确定已安装的 webpack 版本
Posted
技术标签:
【中文标题】如何确定已安装的 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
【讨论】:
以上是关于如何确定已安装的 webpack 版本的主要内容,如果未能解决你的问题,请参考以下文章