docs: add documentation for webpack v5.103.0, v5.104.0, and v5.105.0 features (#7788)

Author: xiaoxiaojx

src/content/api/module-variables.mdx

@@ -155,6 +155,94 @@ Returns the same value as `require.context` but only for `javascript/auto` and `
   });
   ```
 
+### import.meta.main
+
+<Badge text="5.103.0+" />
+
+Returns a boolean indicating whether the current module is an entry point.
+
+**src/index.js** (entry point)
+
+```javascript
+console.log(import.meta.main); // true
+```
+
+**src/utils.js** (not an entry point)
+
+```javascript
+console.log(import.meta.main); // false
+```
+
+This is useful for conditional logic that should only run in entry modules, similar to Node.js's `require.main === module` check.
+
+### import.meta.env
+
+<Badge text="5.103.0+" />
+
+Access environment variables from multiple sources. `import.meta.env` is an object that behaves similarly to `process.env`, allowing you to access environment variables defined through various webpack plugins and configuration options.
+
+**webpack.config.js**
+
+```js
+const webpack = require("webpack");
+
+module.exports = {
+  mode: "production", // NODE_ENV is automatically set to "production"
+  dotenv: {
+    prefix: "WEBPACK_", // Only expose variables with WEBPACK_ prefix
+  },
+  plugins: [
+    // EnvironmentPlugin exposes variables from process.env
+    new webpack.EnvironmentPlugin({
+      API_URL: "https://api.example.com",
+    }),
+    // DefinePlugin allows custom definitions
+    new webpack.DefinePlugin({
+      "import.meta.env.CUSTOM_VAR": JSON.stringify("custom_value"),
+    }),
+  ],
+};
+```
+
+**src/index.js**
+
+```js
+// Access environment variables
+console.log(import.meta.env.NODE_ENV); // "production" (from mode)
+console.log(import.meta.env.API_URL); // Value from EnvironmentPlugin or process.env
+console.log(import.meta.env.CUSTOM_VAR); // "custom_value" (from DefinePlugin)
+
+// Type checking
+console.log(typeof import.meta.env); // "object"
+
+// Truthy check
+if (import.meta.env) {
+  // import.meta.env is truthy
+}
+
+// Accessing non-existent properties returns undefined
+if (!import.meta.env.NOT_EXIST) {
+  // NOT_EXIST is undefined/falsy
+}
+
+// Destructuring assignment
+const { NODE_ENV, API_URL } = import.meta.env;
+```
+
+**Sources of environment variables:**
+
+1. **`mode` option**: Automatically sets `import.meta.env.NODE_ENV` based on the webpack mode (`development`, `production`, or `none`).
+
+2. **[`EnvironmentPlugin`](/plugins/environment-plugin)**: Exposes variables from `process.env` or provides default values.
+
+3. **[`DotenvPlugin`](/configuration/dotenv)**: Loads variables from `.env` files. Only variables with the specified prefix (default: `WEBPACK_`) are exposed.
+
+4. **[`DefinePlugin`](/plugins/define-plugin)**: Allows custom definitions using the `"import.meta.env.*"` pattern.
+
+T> Variables from different sources are merged together. If the same variable is defined in multiple sources, the order of precedence depends on plugin execution order.
+
+T> `import.meta.env` behaves like `process.env` - it's an object, supports `typeof` checks, and accessing non-existent properties returns `undefined`.
+
 ## \_\_filename (NodeJS)
 
 Depending on the configuration option `node.__filename`:
@@ -187,6 +275,8 @@ Equals the configuration option's `output.publicPath`.
 
 The raw require function. This expression isn't parsed by the Parser for dependencies.
 
+W> When webpack bundles are bundled again (e.g., when a previously bundled output is used as input), the [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) will rename `__webpack_require__` from the previous bundle to avoid conflicts (e.g., `__nested_webpack_require_*`). In such cases, use [`__webpack_global__`](#__webpack_global__-webpack-specific) instead, which ensures you can always access the current compilation's `__webpack_require__` function.
+
 ## \_\_webpack_chunk_load\_\_ (webpack-specific)
 
 The internal chunk loading function. Takes one argument:
@@ -256,6 +346,18 @@ __webpack_get_script_filename__ = (chunkId) => {
 
 Generates a `require` function that is not parsed by webpack. Can be used to do cool stuff with a global require function if available.
 
+## \_\_webpack_global\_\_ (webpack-specific)
+
+<Badge text="5.104.0+" />
+
+An alias for [`__webpack_require__`](#__webpack_require__-webpack-specific). When webpack bundles are bundled again (e.g., when a previously bundled output is used as input), the [`CompatibilityPlugin`](/plugins/internal-plugins/#compatibilityplugin) will rename `__webpack_require__` from the previous bundle to avoid conflicts. `__webpack_global__` ensures you can always access the current compilation's `__webpack_require__` function.
+
+**src/module.js**
+
+```js
+__webpack_global__.myProperty = "value";
+```
+
 ## \_\_webpack_exports_info\_\_ (webpack-specific)
 
 In modules, `__webpack_exports_info__` is available to allow exports introspection:

src/content/configuration/devtool.mdx

@@ -22,10 +22,34 @@ Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a mo
 
 ## devtool
 
-`string = 'eval'` `false`
+`string = 'eval'` `Array<{ type: "all" | "javascript" | "css", use: string }>` `false`
 
 Choose a style of [source mapping](http://blog.teamtreehouse.com/introduction-source-maps) to enhance the debugging process. These values can affect build and rebuild speed dramatically.
 
+<Badge text="5.105.0+" />
+
+You can also provide an array of objects to configure different source map styles for different asset types:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devtool: [
+    { type: "javascript", use: "source-map" },
+    { type: "css", use: "inline-source-map" },
+  ],
+};
+```
+
+The `type` field specifies which asset type should receive the devtool value:
+
+- `"all"` - applies to all asset types (JavaScript and CSS)
+- `"javascript"` - applies only to JavaScript files
+- `"css"` - applies only to CSS files
+
+When using an array, each entry will be processed in order. If you provide a string value, it will be treated as `{ type: "all", use: "your-string-value" }`.
+
 T> The webpack repository contains an [example showing the effect of all `devtool` variants](https://github.com/webpack/webpack/tree/master/examples/source-map). Those examples will likely help you to understand the differences.
 
 T> Instead of using the `devtool` option you can also use `SourceMapDevToolPlugin`/`EvalSourceMapDevToolPlugin` directly as it has more options. Never use both the `devtool` option and plugin together. The `devtool` option adds the plugin internally so you would end up with the plugin applied twice.

src/content/configuration/experiments.mdx

@@ -190,6 +190,38 @@ Enable native CSS support. Note that it's an experimental feature still under de
 Experimental features:
 
 - CSS Modules support: webpack will generate a unique name for each CSS class. Use the `.module.css` extension for CSS Modules.
+
+  <Badge text="5.103.0+" />
+
+  Webpack natively supports the CSS Modules `composes` property, allowing you to compose classes from the same file, other CSS modules, or global classes:
+
+  ```css
+  /* styles.module.css */
+  .base {
+    color: blue;
+  }
+
+  .button {
+    composes: base;
+    padding: 10px;
+  }
+
+  .primary {
+    composes: button;
+    background: blue;
+  }
+
+  /* Compose from another CSS module */
+  .composed {
+    composes: className from "./other.module.css";
+  }
+
+  /* Compose from global classes */
+  .globalComposed {
+    composes: global-class from global;
+  }
+  ```
+
 - <Badge text="5.87.0+" /> Style-specific fields resolution in `package.json`
   files: webpack will look for `style` field in `package.json` files and use
   that if it exists for imports inside CSS files.
@@ -256,9 +288,9 @@ TypeScript, Babel, SWC, and Flow.js can be configured to preserve the magic comm
 
 Esbuild is _not_ compatible with this feature (see [evanw/esbuild#1439](https://github.com/evanw/esbuild/issues/1439) and [evanw/esbuild#309](https://github.com/evanw/esbuild/issues/309)), but it may support this in the future.
 
-#### Not implemented
+<Badge text="5.105.0+" />
 
-import.defer() is not yet supported for ContextModule (the import path is a dynamic expression).
+`import.defer()` is now supported for ContextModule (the import path is a dynamic expression). See the [lazy loading guide](/guides/lazy-loading/#defer-import-example) for examples.
 
 ### experiments.futureDefaults
 

src/content/configuration/module.mdx

@@ -446,6 +446,144 @@ import { footer, header } from "./styles.module.css";
 
 By enabling `namedExports`, you adopt a more modular and maintainable approach to managing CSS in JavaScript projects, leveraging ES module syntax for clearer and more explicit imports.
 
+#### module.parser.css.animation
+
+<Badge text="5.104.0+" />
+
+Enable or disable renaming of `@keyframes` animation names in CSS modules.
+
+- Type: `boolean`
+- Default: `true`
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    parser: {
+      css: {
+        animation: true, // Enable @keyframes renaming
+      },
+    },
+  },
+};
+```
+
+#### module.parser.css.container
+
+<Badge text="5.104.0+" />
+
+Enable or disable renaming of `@container` names in CSS modules.
+
+- Type: `boolean`
+- Default: `true`
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    parser: {
+      css: {
+        container: true, // Enable @container renaming
+      },
+    },
+  },
+};
+```
+
+#### module.parser.css.customIdents
+
+<Badge text="5.104.0+" />
+
+Enable or disable renaming of custom identifiers in CSS modules.
+
+- Type: `boolean`
+- Default: `true`
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    parser: {
+      css: {
+        customIdents: true, // Enable custom identifier renaming
+      },
+    },
+  },
+};
+```
+
+#### module.parser.css.dashedIdents
+
+<Badge text="5.104.0+" />
+
+Enable or disable renaming of dashed identifiers, such as CSS custom properties (e.g., `--my-variable`).
+
+- Type: `boolean`
+- Default: `true`
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    parser: {
+      css: {
+        dashedIdents: true, // Enable dashed identifier renaming
+      },
+    },
+  },
+};
+```
+
+#### module.parser.css.function
+
+<Badge text="5.104.0+" />
+
+Enable or disable renaming of `@function` names in CSS modules.
+
+- Type: `boolean`
+- Default: `true`
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    parser: {
+      css: {
+        function: true, // Enable @function renaming
+      },
+    },
+  },
+};
+```
+
+#### module.parser.css.grid
+
+<Badge text="5.104.0+" />
+
+Enable or disable renaming of grid identifiers in CSS modules.
+
+- Type: `boolean`
+- Default: `true`
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    parser: {
+      css: {
+        grid: true, // Enable grid identifier renaming
+      },
+    },
+  },
+};
+```
+
 ### module.parser.css.exportType
 
 Configure how CSS content will be exported.

src/content/configuration/output.mdx

@@ -744,6 +744,31 @@ module.exports = {
 
 The encoding to use when generating the hash. All encodings from Node.JS' [`hash.digest`](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) are supported. Using `'base64'` for filenames might be problematic since it has the character `/` in its alphabet. Likewise `'latin1'` could contain any character.
 
+<Badge text="5.104.0+" />
+
+In addition to the standard Node.js encodings, webpack also supports the following custom digest algorithms for generating shorter or URL-safe hash values:
+
+- `'base64url'` - URL-safe base64 encoding (RFC 4648), recommended for filenames
+- `'base62'` - Base62 encoding (0-9, A-Z, a-z)
+- `'base58'` - Base58 encoding (Bitcoin alphabet)
+- `'base52'` - Base52 encoding (A-Z, a-z)
+- `'base49'` - Base49 encoding
+- `'base36'` - Base36 encoding (0-9, A-Z)
+- `'base32'` - Base32 encoding (RFC 4648)
+- `'base25'` - Base25 encoding
+
+These custom encodings are particularly useful for generating shorter hash values in filenames while maintaining URL safety.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  output: {
+    hashDigest: "base64url", // URL-safe encoding for filenames
+  },
+};
+```
+
 ## output.hashDigestLength
 
 `number = 20`