So ermitteln Sie die installierte Webpack-Version

75

Insbesondere beim Übergang von Webpack v1 zu v2 wäre es wichtig, programmgesteuert zu bestimmen, welche Webpack- Version installiert ist, aber ich kann anscheinend keine geeignete API finden.

Doberkofler
quelle

Antworten:

120

Installierte Version:

Verwenden der Webpack-CLI :(--version, -v Show version number [boolean])

webpack --version

oder:

webpack -v

Verwenden des Befehls npm list :

npm list webpack

Ergebnisse in name@version-range:

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

Verwenden des Garnlistenbefehls :

yarn list webpack

Wie geht das programmgesteuert?

Webpack 2 führte Konfigurationstypen ein .

Anstatt ein Konfigurationsobjekt zu exportieren, können Sie eine Funktion zurückgeben, die eine Umgebung als Argument akzeptiert. Wenn webpack ausgeführt wird , können Sie Bauumgebung Schlüssel über angeben --env, wie --env.production oder --env.platform=web.

Wir werden einen Build-Umgebungsschlüssel namens verwenden --env.version.

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

oder:

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

Damit dies funktioniert, müssen wir zwei Dinge tun:

Ändern Sie unsere webpack.config.jsDatei und verwenden Sie DefinePlugin .

Mit dem DefinePlugin können Sie globale Konstanten erstellen, die zur Kompilierungszeit konfiguriert werden können.

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

Jetzt können wir wie folgt auf die globale Konstante zugreifen:

console.log(WEBPACK_VERSION);

Neueste verfügbare Version:

Mit dem Befehl npm view wird die neueste Version zurückgegeben, die in der Registrierung verfügbar ist:

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


Für das Webpack verwenden:

npm view webpack version
Ricky
quelle
3
Webpack hat also keine API, die seine Version zurückgibt, und ich muss einen Shell-Befehl verwenden?
Doberkofler
1
das funktioniert gut über die cli .... aber wie würde man das programmgesteuert machen? (aka: in einer Skriptdatei)
Maurice
Ich habe eine Möglichkeit aufgenommen, die Version des Webpacks programmgesteuert zu extrahieren und als globale Konstante in einer beliebigen Datei zu verwenden.
Ricky
Nun, ich musste tippennpx webpack --version
Paolo
@doberkofler hat die (jetzt richtige) Antwort und sie ist sogar als die richtige Antwort markiert! stackoverflow.com/a/52143627/3221576 Sie können sich nicht darauf verlassen, webpack -vda dies voraussetzt, dass Ihre aktuelle Shell mit webpackder in Ihrem Programm ausgeführten identisch ist.
KCE
16

Für diejenigen, die verwenden yarn

yarn list webpack wird den Trick machen

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

Nur ein anderer Weg, der noch nicht erwähnt wurde:

Wenn Sie es lokal in einem Projekt installiert haben, öffnen Sie den Ordner node_modules und überprüfen Sie Ihr Webpack-Modul.

$cd /node_modules/webpack/package.json

Öffnen Sie die Datei package.json und suchen Sie unter Version

Geben Sie hier die Bildbeschreibung ein

Isaac Pak
quelle
6

webpack 4 bietet jetzt eine Versionseigenschaft, die verwendet werden kann!

Doberkofler
quelle
1
Dies bedeutet, dass Sie überall dort, wo Sie die webpackVariable bereitgestellt haben (wie in Ihrer Setup- / Konfigurationsdatei), einfach aufrufen können webpack.versionund eine Versionszeichenfolge des Formulars zurückerhalten "x.y.z".
KCE
5

Wenn Sie Angular CLI v7 + verwenden, wird die Webpack-Version in der Ausgabe von 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
Trebor
quelle
2

Fügen Sie webpack -vin Ihr package.json ein :

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

Dann geben Sie in die Konsole:

npm run build

Die erwartete Ausgabe sollte folgendermaßen aussehen:

> npm run build

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

4.42.0
Sergey Chepurnov
quelle
0

In der CLI

$ webpack --version
    
webpack-cli 4.1.0
    
webpack 5.3.2

Im Code (Knotenlaufzeit)

process.env.npm_package_devDependencies_webpack // ^5.3.2

oder

process.env.npm_package_dependencies_webpack // ^5.3.2

Im Plugin

compiler.webpack.version // 5.3.2
Ahmed Kamal
quelle