Normalize guide dependency versions

Author: arechaithanya

src/content/guides/asset-management.mdx

@@ -166,7 +166,7 @@ cacheable modules 539 KiB
   modules by path ./src/ 965 bytes
     ./src/index.js + 1 modules 639 bytes [built] [code generated]
     ./node_modules/css-loader/dist/cjs.js!./src/style.css 326 bytes [built] [code generated]
-webpack 5.4.0 compiled successfully in 2231 ms
+webpack 5.x.x compiled successfully in 2231 ms
 ```
 
 Open up `dist/index.html` in your browser again and you should see that `Hello webpack` is now styled in red. To see what webpack did, inspect the page (don't view the page source, as it won't show you the result, because the `<style>` tag is dynamically created by JavaScript) and look at the page's head tags. It should contain the style block that we imported in `index.js`.
@@ -285,7 +285,7 @@ cacheable modules 540 KiB (javascript) 9.88 KiB (asset)
     ./src/index.js + 1 modules 794 bytes [built] [code generated]
     ./src/icon.png 42 bytes (javascript) 9.88 KiB (asset) [built] [code generated]
     ./node_modules/css-loader/dist/cjs.js!./src/style.css 648 bytes [built] [code generated]
-webpack 5.4.0 compiled successfully in 1972 ms
+webpack 5.x.x compiled successfully in 1972 ms
 ```
 
 If all went well, you should now see your icon as a repeating background, as well as an `img` element beside our `Hello webpack` text. If you inspect this element, you'll see that the actual filename has changed to something like `29822eaa871e8eadeaa4.png`. This means webpack found our file in the `src` folder and processed it!
@@ -396,7 +396,7 @@ cacheable modules 541 KiB (javascript) 43.1 KiB (asset)
     ./src/icon.png 42 bytes (javascript) 9.88 KiB (asset) [built] [code generated]
     ./src/my-font.woff2 42 bytes (javascript) 14.5 KiB (asset) [built] [code generated]
     ./src/my-font.woff 42 bytes (javascript) 18.8 KiB (asset) [built] [code generated]
-webpack 5.4.0 compiled successfully in 2142 ms
+webpack 5.x.x compiled successfully in 2142 ms
 ```
 
 Open up `dist/index.html` again and see if our `Hello webpack` text has changed to the new font. If all is well, you should see the changes.

src/content/guides/code-splitting.mdx

@@ -118,7 +118,7 @@ cacheable modules 530 KiB
   ./src/index.js 257 bytes [built] [code generated]
   ./src/another-module.js 84 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 245 ms
+webpack 5.x.x compiled successfully in 245 ms
 ```
 
 As mentioned there are some pitfalls to this approach:
@@ -216,7 +216,7 @@ cacheable modules 530 KiB
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
   ./src/another-module.js 84 bytes [built] [code generated]
   ./src/index.js 257 bytes [built] [code generated]
-webpack 5.4.0 compiled successfully in 249 ms
+webpack 5.x.x compiled successfully in 249 ms
 ```
 
 As you can see there's another `runtime.bundle.js` file generated besides `shared.bundle.js`, `index.bundle.js` and `another.bundle.js`.
@@ -271,7 +271,7 @@ cacheable modules 530 KiB
   ./src/index.js 257 bytes [built] [code generated]
   ./src/another-module.js 84 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 241 ms
+webpack 5.x.x compiled successfully in 241 ms
 ```
 
 Here are some other useful plugins and loaders provided by the community for splitting code:
@@ -373,7 +373,7 @@ runtime modules 7.37 KiB 11 modules
 cacheable modules 530 KiB
   ./src/index.js 434 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 268 ms
+webpack 5.x.x compiled successfully in 268 ms
 ```
 
 T> You can also use magic comment `webpackExports` with `import()` to expose specific exports from a dynamically imported module:

src/content/guides/development.mdx

@@ -122,7 +122,7 @@ cacheable modules 530 KiB
   ./src/index.js 406 bytes [built] [code generated]
   ./src/print.js 83 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 706 ms
+webpack 5.x.x compiled successfully in 706 ms
 ```
 
 Now open the resulting `index.html` file in your browser. Click the button and look in your console where the error is displayed. The error should say something like this:
@@ -171,12 +171,12 @@ Let's add an npm script that will start webpack's Watch Mode:
    "author": "",
    "license": "ISC",
    "devDependencies": {
-     "html-webpack-plugin": "^5.0.0",
-     "webpack": "^5.4.0",
-     "webpack-cli": "^6.0.0"
+     "html-webpack-plugin": "^5.6.6",
+     "webpack": "^5.105.0",
+     "webpack-cli": "^7.0.0"
    },
    "dependencies": {
-     "lodash": "^4.17.20"
+     "lodash": "^4.17.21"
    }
  }
 ```
@@ -273,13 +273,13 @@ Let's add a script to easily run the dev server as well:
    "author": "",
    "license": "ISC",
    "devDependencies": {
-     "html-webpack-plugin": "^5.0.0",
-     "webpack": "^5.4.0",
-     "webpack-cli": "^6.0.0",
-     "webpack-dev-server": "^5.0.0"
+     "html-webpack-plugin": "^5.6.6",
+     "webpack": "^5.105.0",
+     "webpack-cli": "^7.0.0",
+     "webpack-dev-server": "^5.2.3"
    },
    "dependencies": {
-     "lodash": "^4.17.20"
+     "lodash": "^4.17.21"
    }
  }
 ```
@@ -399,15 +399,15 @@ Now add an npm script to make it a little easier to run the server:
    "author": "",
    "license": "ISC",
    "devDependencies": {
-     "express": "^4.17.1",
-     "html-webpack-plugin": "^5.0.0",
-     "webpack": "^5.4.0",
-     "webpack-cli": "^6.0.0",
-     "webpack-dev-middleware": "^4.0.2",
-     "webpack-dev-server": "^5.0.0"
+     "express": "^5.2.1",
+     "html-webpack-plugin": "^5.6.6",
+     "webpack": "^5.105.0",
+     "webpack-cli": "^7.0.0",
+     "webpack-dev-middleware": "^8.0.3",
+     "webpack-dev-server": "^5.2.3"
    },
    "dependencies": {
-     "lodash": "^4.17.20"
+     "lodash": "^4.17.21"
    }
  }
 ```
@@ -425,12 +425,12 @@ Example app listening on port 3000!
 <i>   ./src/index.js 406 bytes [built] [code generated]
 <i>   ./src/print.js 83 bytes [built] [code generated]
 <i>   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-<i> webpack 5.4.0 compiled successfully in 709 ms
+<i> webpack 5.x.x compiled successfully in 709 ms
 <i> [webpack-dev-middleware] Compiled successfully.
 <i> [webpack-dev-middleware] Compiling...
 <i> [webpack-dev-middleware] assets by status 1.38 MiB [cached] 2 assets
 <i> cached modules 530 KiB (javascript) 1.9 KiB (runtime) [cached] 12 modules
-<i> webpack 5.4.0 compiled successfully in 19 ms
+<i> webpack 5.x.x compiled successfully in 19 ms
 <i> [webpack-dev-middleware] Compiled successfully.
 ```
 

src/content/guides/getting-started.mdx

@@ -34,7 +34,7 @@ Webpack is a good fit when your application needs a customizable build pipeline:
 
 Webpack is used to efficiently compile JavaScript modules. Once [installed](/guides/installation), you can interact with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community.
 
-W> The minimum supported Node.js version to run webpack 5 is 10.13.0 (LTS)
+W> The examples in this guide use `webpack-cli` 7, which requires Node.js 20.9.0 or later.
 
 <StackBlitzPreview example="getting-started?terminal=" />
 
@@ -149,8 +149,8 @@ T> If you want to learn more about the inner workings of `package.json`, then we
    "author": "",
    "license": "MIT",
    "devDependencies": {
-     "webpack": "^5.106.2",
-     "webpack-cli": "^7.0.2"
+     "webpack": "^5.105.0",
+     "webpack-cli": "^7.0.0"
    }
  }
 ```
@@ -369,8 +369,8 @@ Given it's not particularly fun to run a local copy of webpack from the CLI, we
    "author": "",
    "license": "ISC",
    "devDependencies": {
-     "webpack": "^5.106.2",
-     "webpack-cli": "^7.0.2"
+     "webpack": "^5.105.0",
+     "webpack-cli": "^7.0.0"
    },
    "dependencies": {
      "lodash": "^4.17.21"

src/content/guides/output-management.mdx

@@ -127,7 +127,7 @@ cacheable modules 530 KiB
   ./src/index.js 406 bytes [built] [code generated]
   ./src/print.js 83 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 1996 ms
+webpack 5.x.x compiled successfully in 1996 ms
 ```
 
 We can see that webpack generates our `print.bundle.js` and `index.bundle.js` files, which we also specified in our `index.html` file. if you open `index.html` in your browser, you can see what happens when you click the button.
@@ -187,7 +187,7 @@ cacheable modules 530 KiB
   ./src/index.js 406 bytes [built] [code generated]
   ./src/print.js 83 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 2189 ms
+webpack 5.x.x compiled successfully in 2189 ms
 ```
 
 If you open `index.html` in your code editor, you'll see that the `HtmlWebpackPlugin` has created an entirely new file for you and that all the bundles are automatically added.

src/content/guides/production.mdx

@@ -139,16 +139,16 @@ Now, let's modify our npm scripts to use the new configuration files. For the `s
     "author": "",
     "license": "ISC",
     "devDependencies": {
-      "css-loader": "^0.28.4",
-      "csv-loader": "^2.1.1",
-      "express": "^4.15.3",
-      "file-loader": "^0.11.2",
-      "html-webpack-plugin": "^2.29.0",
-      "style-loader": "^0.18.2",
-      "webpack": "^4.30.0",
-      "webpack-dev-middleware": "^1.12.0",
-      "webpack-dev-server": "^2.9.1",
-      "webpack-merge": "^4.1.0",
+      "css-loader": "^7.1.3",
+      "csv-loader": "^3.0.5",
+      "express": "^5.2.1",
+      "html-webpack-plugin": "^5.6.6",
+      "style-loader": "^4.0.0",
+      "webpack": "^5.105.0",
+      "webpack-cli": "^7.0.0",
+      "webpack-dev-middleware": "^8.0.3",
+      "webpack-dev-server": "^5.2.3",
+      "webpack-merge": "^6.0.1",
       "xml-loader": "^1.2.1"
     }
   }

src/content/guides/shimming.mdx

@@ -115,7 +115,7 @@ runtime modules 344 bytes 2 modules
 cacheable modules 530 KiB
   ./src/index.js 191 bytes [built] [code generated]
   ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
-webpack 5.4.0 compiled successfully in 2910 ms
+webpack 5.x.x compiled successfully in 2910 ms
 ```
 
 We can also use the `ProvidePlugin` to expose a single export of a module by configuring it with an "array path" (e.g. `[module, child, ...children?]`). So let's imagine we only wanted to provide the `join` method from `lodash` wherever it's invoked: