docs: v5.103.0 (#7711)

Author: alexander-akait

src/content/configuration/module.mdx

@@ -277,11 +277,15 @@ module.exports = {
         // Enable/disable `@import` at-rules handling, available since webpack 5.97.0
         // type: boolean
         import: true,
+        // Enable/disable url()/image-set()/src()/image() functions handling, available since webpack 5.97.0
+        // type: boolean
+        url: true,
         // Use ES modules named export for css exports, available since webpack 5.90.0
         // type: boolean
         namedExports: true,
-        // Enable/disable url()/image-set()/src()/image() functions handling, available since webpack 5.97.0
-        url: true,
+        // Configure how CSS content is exported
+        // type: string
+        exportType: 'link',
       },
       'css/auto': {
         // ditto
@@ -354,6 +358,39 @@ This option enables the handling of `@import` at-rules in CSS files. When set to
 
 T> To filter specific imports, you can use Webpack's built-in [IgnorePlugin](/plugins/ignore-plugin/). The [`filter` option](/loaders/css-loader/#filter), as available in `css-loader`, is not supported.
 
+#### module.parser.css.url
+
+This option enables or disables the handling of URLs in functions such as `url()`, `image-set()`, `src()`, and `image()` within CSS files. When enabled, these URLs are resolved and processed by webpack.
+
+- Type: `boolean`
+- Available: 5.97.0+
+- Example:
+
+  ```js
+  module.exports = {
+    module: {
+      parser: {
+        css: {
+          url: true,
+        },
+      },
+    },
+  };
+  ```
+
+  ```css
+  /* styles.css */
+  .background {
+    background-image: url('./images/bg.jpg');
+  }
+
+  .icon {
+    content: image('./icons/star.svg');
+  }
+  ```
+
+T> To filter specific imports, you can use Webpack's built-in [IgnorePlugin](/plugins/ignore-plugin/). The [`filter` option](/loaders/css-loader/#filter), as available in `css-loader`, is not supported.
+
 #### module.parser.css.namedExports
 
 This option enables the use of ES modules named export for CSS exports. When set to `true`, the CSS module will export its classes and styles using named exports.
@@ -407,38 +444,32 @@ import { header, footer } 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.url
+### module.parser.css.exportType
 
-This option enables or disables the handling of URLs in functions such as `url()`, `image-set()`, `src()`, and `image()` within CSS files. When enabled, these URLs are resolved and processed by webpack.
+Configure how CSS content will be exported.
 
 - Type: `boolean`
-- Available: 5.97.0+
+- Available: 5.102.0+
 - Example:
 
   ```js
   module.exports = {
     module: {
       parser: {
         css: {
-          url: true,
+          // ...
+          exportType: 'text',
         },
       },
     },
   };
   ```
 
-  ```css
-  /* styles.css */
-  .background {
-    background-image: url('./images/bg.jpg');
-  }
-
-  .icon {
-    content: image('./icons/star.svg');
-  }
-  ```
+Possible values: `'link' | 'text' | 'css-style-sheet'
 
-T> To filter specific imports, you can use Webpack's built-in [IgnorePlugin](/plugins/ignore-plugin/). The [`filter` option](/loaders/css-loader/#filter), as available in `css-loader`, is not supported.
+- `link` - extract CSS into own file and use `link` tags to inject into DOM.
+- `text` - store CSS in JS file and return using default export.
+- `css-style-sheet` - the default export is a constructable stylesheet (i.e. CSSStyleSheet). Useful for custom elements and shadow DOM.
 
 ### module.parser.javascript
 
@@ -763,6 +794,51 @@ module.exports = {
 };
 ```
 
+### module.parser.json.namedExports
+
+Allow named exports for json of object type.
+
+- Type: `boolean`
+- Available: <Badge text='5.103.0+' />
+- Example:
+
+```js
+module.exports = {
+  module: {
+    parser: {
+      json: {
+        // Example:
+        // import { myField } from "./file.json";
+        //
+        // console.log(myField);
+        namedExports: true,
+      },
+    },
+  },
+};
+```
+
+### module.parser.json.parse
+
+Function to parser content and return JSON.
+
+- Type: `((input: string) => Buffer | JsonValue)`
+- Example:
+
+```js
+const json5 = require('json5');
+
+module.exports = {
+  module: {
+    parser: {
+      json: {
+        parse: json5.parse,
+      },
+    },
+  },
+};
+```
+
 ## module.noParse
 
 `RegExp` `[RegExp]` `function(resource)` `string` `[string]`

src/content/configuration/node.mdx

@@ -17,7 +17,7 @@ The following Node.js options configure whether to polyfill or mock certain [Nod
 
 This feature is provided by webpack's internal [`NodeStuffPlugin`](https://github.com/webpack/webpack/blob/main/lib/NodeStuffPlugin.js) plugin.
 
-W> As of webpack 5, You can configure only `global`, `__filename` or `__dirname` under `node` option. If you're looking for how to polyfill `fs` alike in Node.js under webpack 5, please check [resolve.fallback](/configuration/resolve/#resolvefallback) for help.
+W> As of webpack 5, You can configure only `global`, `__filename`/`import.meta.filename` or `__dirname`/`import.meta.dirname` under `node` option. If you're looking for how to polyfill `fs` alike in Node.js under webpack 5, please check [resolve.fallback](/configuration/resolve/#resolvefallback) for help.
 
 ## node
 
@@ -48,7 +48,7 @@ See [the Node.js documentation](https://nodejs.org/api/globals.html#globals_glob
 
 Options:
 
-- `true`: Provide a polyfill.
+- `true`: Provide a polyfill or using `globalThis` if supported by your environment, see the [`environment`](/configuration/output/#outputenvironment) option.
 - `false`: Provide nothing. Code that expects this object may crash with a `ReferenceError`.
 - `'warn'`: Show a warning when using `global`.
 
@@ -59,11 +59,16 @@ Options:
 Options:
 
 - `true`: The filename of the **input** file relative to the [`context` option](/configuration/entry-context/#context).
-- `false`: Webpack won't touch your `__filename` code, which means you have the regular Node.js `__filename` behavior. The filename of the **output** file when run in a Node.js environment.
+- `false`: Webpack won't touch your `__filename` and `import.meta.filename` code, which means you have the regular Node.js `__filename` and `import.meta.filename` behavior. The filename of the **output** file when run in a Node.js environment.
 - `'mock'`: The fixed value `'/index.js'`.
 - `'warn-mock'`: Use the fixed value of `'/index.js'` but show a warning.
-- `'node-module'`: Replace `__filename` in CommonJS modules to `fileURLToPath(import.meta.url)` when `output.module` is enabled.
-- `'eval-only'`
+- `'node-module'`: Replace `__filename` in CommonJS modules and `import.meta.filename` code in ES modules to `fileURLToPath(import.meta.url)` when `output.module` is enabled.
+- `'eval-only'`: Defer the resolution of `__filename`/`import.meta.filename` to the Node.js runtime at execution time, but evaluate them in construction like `require`/`import` to properly resolve modules. Replace `__filename` with `import.meta.filename` and vice versa depending on the `output.module` option (if your environment does not support `import.meta.filename`, the fallback will be used using `import.meta.url` to get this value).
+
+The default value can be affected by different [`target`](/configuration/target/):
+
+- Defaults to `'eval-only'` if [`target`](/configuration/target/) is set to `'node'` or node-like environments (`async-node`, `electron`) or mixed targets (`web` and `node` together).
+- Defaults to `'mock'` if [`target`](/configuration/target/) is set to `'web'` or web-like environments.
 
 ## node.\_\_dirname
 
@@ -72,8 +77,13 @@ Options:
 Options:
 
 - `true`: The dirname of the **input** file relative to the [`context` option](/configuration/entry-context/#context).
-- `false`: Webpack won't touch your `__dirname` code, which means you have the regular Node.js `__dirname` behavior. The dirname of the **output** file when run in a Node.js environment.
+- `false`: Webpack won't touch your `__dirname` and `import.meta.dirname` code, which means you have the regular Node.js `__dirname` and `import.meta.dirname` behavior. The dirname of the **output** file when run in a Node.js environment.
 - `'mock'`: The fixed value `'/'`.
 - `'warn-mock'`: Use the fixed value of `'/'` but show a warning.
 - `'node-module'`: Replace `__dirname` in CommonJS modules to `fileURLToPath(import.meta.url + "/..")` when `output.module` is enabled.
-- `'eval-only'`
+- `'eval-only'`: Defer the resolution of `__dirname`/`import.meta.dirname` to the Node.js runtime at execution time, but evaluate them in construction like `require`/`import` to properly resolve modules. Replace `__dirname` with `import.meta.dirname` and vice versa depending on the `output.module` option (if your environment does not support `import.meta.filename`, the fallback will be used using `import.meta.url` to get this value).
+
+The default value can be affected by different [`target`](/configuration/target/):
+
+- Defaults to `'eval-only'` if [`target`](/configuration/target/) is set to `'node'` or node-like environments (`async-node`, `electron`) or mixed targets (`web` and `node` together).
+- Defaults to `'mock'` if [`target`](/configuration/target/) is set to `'web'` or web-like environments.

src/content/configuration/output.mdx

@@ -508,13 +508,17 @@ module.exports = {
       globalThis: true,
       // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
       module: false,
+      // The environment supports object method shorthand ('{ module() {} }').
+      methodShorthand: true,
       // Determines if the node: prefix is generated for core module imports in environments that support it.
       // This is only applicable to Webpack runtime code.
       nodePrefixForCoreModules: false,
       // The environment supports optional chaining ('obj?.a' or 'obj?.()').
       optionalChaining: true,
       // The environment supports template literals.
       templateLiteral: true,
+      // The environment supports `import.meta.dirname` and `import.meta.filename`.
+      importMetaDirnameAndFilename: false,
     },
   },
 };
@@ -2158,7 +2162,6 @@ T> It also adds some info about tree shaking to the generated bundle.
 ## output.publicPath
 
 - Type:
-
   - `function`
   - `string`
 

src/content/plugins/eval-source-map-dev-tool-plugin.mdx

@@ -37,10 +37,15 @@ The following options are supported:
   (pathData: PathData, assetInfo?: AssetInfo) => string;
   ```
 
-- `moduleFilenameTemplate` (`string`): See [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate).
+- `ignoreList` (`string|RegExp|array`): Decide whether to ignore source files that match the specified value in source maps.
 - `module` (`boolean`): Indicates whether loaders should generate source maps (defaults to `true`).
+- `moduleFilenameTemplate` (`string`): See [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate).
 - `columns` (`boolean`): Indicates whether column mappings should be used (defaults to `true`).
 - `protocol` (`string`): Allows user to override default protocol (`webpack-internal://`)
+- `namespace` (`string`): Namespace prefix to allow multiple webpack roots in the devtools. See [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace).
+- `noSources = false` (`boolean`): Prevents the source file content from being included in the source map.
+- `sourceRoot` (`string`): Provide a custom value for the `sourceRoot` property in source maps.
+- `debugIds` (`boolean`): If `true`, unique ids will be emitted in source and sourcemaps which streamlines identifying sourcemaps across different builds. See the [TC39 sourcemap debug ID proposal](https://github.com/tc39/ecma426/blob/main/proposals/debug-id.md) for more details.
 
 T> Setting `module` and/or `columns` to `false` will yield less accurate source maps but will also improve compilation performance significantly.
 

src/content/plugins/source-map-dev-tool-plugin.mdx

@@ -38,9 +38,10 @@ The following options are supported:
 
 - `moduleFilenameTemplate` (`string`): See [`output.devtoolModuleFilenameTemplate`](/configuration/output/#outputdevtoolmodulefilenametemplate).
 - `fallbackModuleFilenameTemplate` (`string`): See link above.
-- `namespace` (`string`): See [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace).
+- `ignoreList` (`string|RegExp|array`): Decide whether to ignore source files that match the specified value in source maps.
 - `module = true` (`boolean`): Indicates whether loaders should generate source maps.
 - `columns = true` (`boolean`): Indicates whether column mappings should be used.
+- `namespace` (`string`): Namespace prefix to allow multiple webpack roots in the devtools. See [`output.devtoolNamespace`](/configuration/output/#outputdevtoolnamespace).
 - `noSources = false` (`boolean`): Prevents the source file content from being included in the source map.
 - `publicPath` (`string`): Emits absolute URLs with public path prefix, e.g. `https://example.com/project/`.
 - `fileContext` (`string`): Makes the `[file]` argument relative to this directory.