Merge remote-tracking branch 'upstream/main' into responsiveSponsorAd

.github/CONTRIBUTING.md

@@ -30,7 +30,7 @@ See the `package.json` for the full list of `scripts`.
 
 > **Note**
 >
-> **Node v14.20** or above is required for the build process to run properly.
+> **Node v18.12.0** or above is required for the build process to run properly.
 
 ## Contributor License Agreement
 

.github/workflows/testing.yml

@@ -57,7 +57,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Vale
-        uses: errata-ai/vale-action@v2.0.1
+        uses: errata-ai/vale-action@v2.1.0
         with:
           files: src/content
         env:

package.json

@@ -21,7 +21,7 @@
     "url": "https://github.com/webpack/webpack.js.org/issues"
   },
   "engines": {
-    "node": "^14.20.0 || ^16.15.0 || >=18.0.0"
+    "node": ">= 18.12.0"
   },
   "scripts": {
     "clean-dist": "rimraf ./dist",
@@ -70,50 +70,50 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/eslint-parser": "^7.23.3",
+    "@babel/core": "^7.24.3",
+    "@babel/eslint-parser": "^7.24.1",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.23.8",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
     "@mdx-js/loader": "^2.0.0-next.9",
-    "@octokit/auth-action": "^4.0.1",
+    "@octokit/auth-action": "^5.0.0",
     "@octokit/rest": "^20.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
     "@svgr/webpack": "^8.1.0",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.8.1",
-    "css-minimizer-webpack-plugin": "^5.0.1",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
     "cypress": "^13.6.2",
     "directory-tree": "^3.5.1",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-mdx": "^3.0.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "front-matter": "^4.0.2",
     "github-slugger": "^2.0.0",
     "html-webpack-plugin": "^5.5.4",
     "http-server": "^14.1.1",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
     "hyperlink": "^5.0.4",
     "jest": "^29.7.0",
-    "lightningcss": "^1.22.1",
-    "lint-staged": "^14.0.1",
+    "lightningcss": "^1.24.1",
+    "lint-staged": "^15.2.2",
     "lodash": "^4.17.21",
     "markdownlint-cli": "^0.38.0",
     "mdast-util-to-string": "^4.0.0",
-    "mini-css-extract-plugin": "^2.7.6",
+    "mini-css-extract-plugin": "^2.8.1",
     "mkdirp": "^3.0.1",
     "modularscale-sass": "^3.0.3",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.4.33",
-    "postcss-loader": "^7.3.3",
-    "prettier": "^3.1.1",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1",
+    "prettier": "^3.2.5",
     "react-refresh": "^0.14.0",
     "redirect-webpack-plugin": "^1.0.0",
     "remark": "^14.0.3",
@@ -125,19 +125,19 @@
     "remark-html": "^15.0.2",
     "remark-refractor": "montogeek/remark-refractor",
     "rimraf": "^5.0.1",
-    "sass": "^1.69.7",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
     "sirv-cli": "^2.0.2",
     "sitemap-static": "^0.4.2",
     "static-site-generator-webpack-plugin": "^3.4.1",
-    "style-loader": "^3.3.3",
+    "style-loader": "^3.3.4",
     "tailwindcss": "^3.3.6",
     "tap-spot": "^1.1.2",
     "unist-util-visit": "^5.0.0",
-    "webpack": "^5.89.0",
+    "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^5.0.4",
     "webpack-merge": "^5.10.0",
     "workbox-webpack-plugin": "^7.0.0",
     "yarn-deduplicate": "^6.0.2"

src/content/api/compilation-hooks.mdx

@@ -11,6 +11,7 @@ contributors:
   - EugeneHlushko
   - chenxsan
   - jamesgeorge007
+  - snitin315
 ---
 
 The `Compilation` module is used by the `Compiler` to create new compilations
@@ -30,6 +31,8 @@ compilation.hooks.someHook.tap(/* ... */);
 As with the `compiler`, `tapAsync` and `tapPromise` may also be available
 depending on the type of hook.
 
+W> Since webpack 5, `hooks` are no longer extendable. Use a `WeakMap` to add custom hooks.
+
 ### buildModule
 
 `SyncHook`
@@ -647,3 +650,97 @@ Executed after setting up a child compiler.
 ### normalModuleLoader
 
 Since webpack v5 `normalModuleLoader` hook was removed. Now to access the loader use `NormalModule.getCompilationHooks(compilation).loader` instead.
+
+### statsPreset
+
+`HookMap`
+
+This HookMap is like a list of actions that gets triggered when a preset is used. It takes in an options object. When a plugin manages a preset, it should change settings in this object carefully without replacing existing ones.
+
+- Callback Parameters: `options` `context`
+
+Here's an illustrative plugin example:
+
+```js
+compilation.hooks.statsPreset.for('my-preset').tap('MyPlugin', (options) => {
+  if (options.all === undefined) options.all = true;
+});
+```
+
+This plugin ensures that for the preset `'my-preset'`, if the `all` option is undefined, it defaults to true.
+
+### statsNormalize
+
+`SyncHook`
+
+This hook is used to transform an options object into a consistent format that can be easily used by subsequent hooks. It also ensures that missing options are set to their default values.
+
+- Callback Parameters: `options` `context`
+
+Here's an illustrative plugin example:
+
+```js
+compilation.hooks.statsNormalize.tap('MyPlugin', (options) => {
+  if (options.myOption === undefined) options.myOption = [];
+
+  if (!Array.isArray(options.myOption)) options.myOptions = [options.myOptions];
+});
+```
+
+In this plugin, if the `myOption` is missing, it sets it to an empty array. Additionally, it ensures that `myOption` is always an array even if it was originally defined as a single value.
+
+### statsFactory
+
+This hook provides access to the [`StatsFactory` class](https://github.com/webpack/webpack/blob/main/lib/stats/StatsFactory.js) for specific options.
+
+- Callback Parameters: `statsFactory` `options`
+
+#### StatsFactory.hooks.extract
+
+`HookMap`
+
+- Callback Parameters: `object` `data` `context`
+
+`data` contains the class. object is an object to which properties should be added. `context` provides contextual information, such as classes on the path.
+
+Example:
+
+```js
+compilation.hooks.statsFactory.tap('MyPlugin', (statsFactory, options) => {
+  statsFactory.hooks.extract
+    .for('compilation')
+    .tap('MyPlugin', (object, compilation) => {
+      object.customProperty = MyPlugin.getCustomValue(compilation);
+    });
+});
+```
+
+#### StatsFactory.hooks.result
+
+`HookMap`
+
+Called with the result on each level.
+
+- Callback Parameters: `result` `context`
+
+### statsPrinter
+
+This hook provides access to the [`StatsPrinter` class](https://github.com/webpack/webpack/blob/main/lib/stats/StatsPrinter.js) for specific options.
+
+- Callback Parameters: `statsPrinter` `options`
+
+#### StatsPrinter.hooks.print
+
+`HookMap`
+
+This hook is called when a part should be printed.
+
+- Callback Parameters: `object` `context`
+
+#### StatsPrinter.hooks.result
+
+`HookMap`
+
+This hook is called for the resulting string for a part.
+
+- Callback Parameters: `result` `context`

src/content/api/compiler-hooks.mdx

@@ -10,14 +10,17 @@ contributors:
   - EugeneHlushko
   - superburrito
   - chenxsan
+  - snitin315
 ---
 
 The `Compiler` module is the main engine that creates a compilation instance
 with all the options passed through the [CLI](/api/cli) or [Node API](/api/node). It extends the
 `Tapable` class in order to register and call plugins. Most user-facing plugins
 are first registered on the `Compiler`.
 
-When developing a plugin for webpack, you might want to know where each hook is called. To learn this, search for `hooks.<hook name>.call` across the webpack source
+When developing a plugin for webpack, you might want to know where each hook is called. To learn this, search for `hooks.<hook name>.call` across the webpack source.
+
+W> Since webpack 5, `hooks` are no longer extendable. Use a `WeakMap` to add custom hooks.
 
 ## Watching
 
@@ -294,14 +297,14 @@ Called when the compiler is closing.
 
 `SyncBailHook`
 
-Allows to use infrastructure logging when enabled in the configuration via [`infrastructureLogging` option](/configuration/other-options/#infrastructurelogging).
+Allows to use infrastructure logging when enabled in the configuration via [`infrastructureLogging` option](/configuration/infrastructureLogging/).
 
 - Callback Parameters: `name`, `type`, `args`
 
 ### log
 
 `SyncBailHook`
 
-Allows to log into [stats](/configuration/stats/) when enabled, see [`stats.logging`, `stats.loggingDebug` and `stats.loggingTrace` options](/configuration/stats/#stats-options).
+Allows to log into [stats](/configuration/stats/) when enabled, see [`stats.logging`, `stats.loggingDebug` and `stats.loggingTrace` options](/configuration/infrastructureLogging/).
 
 - Callback Parameters: `origin`, `logEntry`

src/content/api/loaders.mdx

@@ -50,7 +50,7 @@ module.exports = function (content, map, meta) {
 };
 ```
 
-The `this.callback` method is more flexible as it allows multiple arguments to be passed as opposed to only the `content`.
+The `this.callback` method is more flexible as you pass multiple arguments instead of using `content` only.
 
 **sync-loader-with-multiple-results.js**
 
@@ -776,8 +776,8 @@ module.exports = function (source) {
 
 ## Logging
 
-Logging API is available since the release of webpack 4.37. When `logging` is enabled in [`stats configuration`](/configuration/stats/#statslogging) and/or when [`infrastructure logging`](/configuration/other-options/#infrastructurelogging) is enabled, loaders may log messages which will be printed out in the respective logger format (stats, infrastructure).
+Logging API is available since the release of webpack 4.37. When `logging` is enabled in [`stats configuration`](/configuration/stats/#statslogging) and/or when [`infrastructure logging`](/configuration/infrastructureLogging) is enabled, loaders may log messages which will be printed out in the respective logger format (stats, infrastructure).
 
 - Loaders should prefer to use `this.getLogger()` for logging which is a shortcut to `compilation.getLogger()` with loader path and processed file. This kind of logging is stored to the Stats and formatted accordingly. It can be filtered and exported by the webpack user.
 - Loaders may use `this.getLogger('name')` to get an independent logger with a child name. Loader path and processed file is still added.
-- Loaders may use special fallback logic for detecting logging support `this.getLogger ? this.getLogger() : console` to provide a fallback when an older webpack version is used which does not support `getLogger` method.
+- Loaders may use specific fallback logic for detecting logging support `this.getLogger ? this.getLogger() : console` to provide a fallback when an older webpack version is used which does not support `getLogger` method.

src/content/api/module-methods.mdx

@@ -96,7 +96,7 @@ W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/W
 
 It is not possible to use a fully dynamic import statement, such as `import(foo)`. Because `foo` could potentially be any path to any file in your system or project.
 
-The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an `import()` call is included. For example, `` import(`./locale/${language}.json`) `` will cause every `.json` file in the `./locale` directory to be bundled into the new chunk. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption.
+The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an `import()` call is included. For example, ``import(`./locale/${language}.json`)`` will cause every `.json` file in the `./locale` directory to be bundled into the new chunk. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption.
 
 ```javascript
 // imagine we had a method to get language from cookies or other storage
@@ -166,7 +166,7 @@ import(
 Since webpack 2.6.0, different modes for resolving dynamic imports can be specified. The following options are supported:
 
 - `'lazy'` (default): Generates a lazy-loadable chunk for each `import()`ed module.
-- `'lazy-once'`: Generates a single lazy-loadable chunk that can satisfy all calls to `import()`. The chunk will be fetched on the first call to `import()`, and subsequent calls to `import()` will use the same network response. Note that this only makes sense in the case of a partially dynamic statement, e.g. `` import(`./locales/${language}.json`) ``, where multiple module paths that can potentially be requested.
+- `'lazy-once'`: Generates a single lazy-loadable chunk that can satisfy all calls to `import()`. The chunk will be fetched on the first call to `import()`, and subsequent calls to `import()` will use the same network response. Note that this only makes sense in the case of a partially dynamic statement, e.g. ``import(`./locales/${language}.json`)``, where multiple module paths that can potentially be requested.
 - `'eager'`: Generates no extra chunk. All modules are included in the current chunk and no additional network requests are made. A `Promise` is still returned but is already resolved. In contrast to a static import, the module isn't executed until the call to `import()` is made.
 - `'weak'`: Tries to load the module if the module function has already been loaded in some other way (e.g. another chunk imported it or a script containing the module was loaded). A `Promise` is still returned, but only successfully resolves if the chunks are already on the client. If the module is not available, the `Promise` is rejected. A network request will never be performed. This is useful for universal rendering when required chunks are always manually served in initial requests (embedded within the page), but not in cases where app navigation will trigger an import not initially served.
 
@@ -398,7 +398,7 @@ require.context(
 );
 ```
 
-Specify a whole group of dependencies using a path to the `directory`, an option to `includeSubdirs`, a `filter` for more fine grained control of the modules included, and a `mode` to define the way how loading will work. Underlying modules can then be easily resolved later on:
+Specify a whole group of dependencies using a path to the `directory`, an option to `includeSubdirs`, a `filter` for more fine grained control of the modules included, and a `mode` to define the way how loading will work. Underlying modules can then be resolved later on:
 
 ```javascript
 var context = require.context('components', true, /\.html$/);

src/content/api/parser.mdx

@@ -8,6 +8,7 @@ contributors:
   - misterdev
   - EugeneHlushko
   - chenxsan
+  - snitin315
 ---
 
 The `parser` instance, found in the `compiler`, is used to parse each module
@@ -36,6 +37,8 @@ depending on the type of hook.
 The following lifecycle hooks are exposed by the `parser` and can be accessed
 as such:
 
+W> Since webpack 5, `hooks` are no longer extendable. Use a `WeakMap` to add custom hooks.
+
 ### evaluateTypeof
 
 `SyncBailHook`