How to determine the installed webpack version
Javascriptnode.jsWebpackWebpack 2Webpack 3Javascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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
Solution 2 - Javascript
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.
Solution 3 - Javascript
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
Solution 4 - Javascript
webpack 4 now offers a version property that can be used!
Solution 5 - Javascript
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
Solution 6 - Javascript
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
> [email protected] build /home/user/repositories/myproject/js
> webpack -v
4.42.0
Solution 7 - Javascript
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