Velvet Star Monitor

Standout celebrity highlights with iconic style.

updates

How to determine the installed webpack version

Writer Matthew Martinez

Especially during the transition from webpack v1 to v2, it would be important to programmatically determine what webpack version is installed, but I cannot seem to find the appropriate API.

7 Answers

Version Installed:

Using webpack CLI: (--version, -v Show version number [boolean])

webpack --version

or:

webpack -v

Using npm list command:

npm list webpack

Results in name@version-range:

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

Using yarn list command:

yarn list webpack

How to do it programmatically?

Webpack 2 introduced Configuration Types.

Instead of exporting a configuration object, you may return a function which accepts an environment as argument. When running webpack, you may specify build environment keys via --env, such as --env.production or --env.platform=web.

We will use a build environment key called --env.version.

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

or:

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

For this to work we will need to do two things:

Change our webpack.config.js file and use DefinePlugin.

The DefinePlugin allows you to create global constants which can be configured at compile time.

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

Now we can access the global constant like so:

console.log(WEBPACK_VERSION);

Latest version available:

Using npm view command will return the latest version available on the registry:

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


For webpack use:

npm view webpack version
5

For those who are using yarn

yarn list webpack will do the trick

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

Just another way not mentioned yet:

If you installed it locally to a project then open up the node_modules folder and check your webpack module.

< /node_modules/webpack/package.json

Open the package.json file and look under version

enter image description here

0

webpack 4 now offers a version property that can be used!

1

If using Angular CLI v7+, the webpack version is printed in the output of 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
1

Put webpack -v into your package.json:

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

Then enter in the console:

npm run build

Expected output should look like:

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

In CLI

$ webpack --version
webpack-cli 4.1.0
webpack 5.3.2

In Code (node runtime)

process.env.npm_package_devDependencies_webpack // ^5.3.2

or

process.env.npm_package_dependencies_webpack // ^5.3.2

In Plugin

compiler.webpack.version // 5.3.2

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy