From 2a0adb9145bbdee66171035202585d49730f61f1 Mon Sep 17 00:00:00 2001 From: alexander-akait Date: Wed, 26 Nov 2025 20:07:51 +0300 Subject: [PATCH] docs: v5.103.0 --- src/content/configuration/module.mdx | 110 +++++++++++++++--- src/content/configuration/node.mdx | 24 ++-- src/content/configuration/output.mdx | 5 +- .../eval-source-map-dev-tool-plugin.mdx | 7 +- .../plugins/source-map-dev-tool-plugin.mdx | 3 +- 5 files changed, 122 insertions(+), 27 deletions(-) diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx index 54a2ef184945..d77dc1c54db9 100644 --- a/src/content/configuration/module.mdx +++ b/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,12 +444,12 @@ 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 @@ -420,25 +457,19 @@ This option enables or disables the handling of URLs in functions such as `url() 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: +- 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]` diff --git a/src/content/configuration/node.mdx b/src/content/configuration/node.mdx index 703eca62fff4..ac10ac4f9a4a 100644 --- a/src/content/configuration/node.mdx +++ b/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. diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index 81b9f9e356de..f44c0ce81e44 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -508,6 +508,8 @@ 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, @@ -515,6 +517,8 @@ module.exports = { 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` diff --git a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx b/src/content/plugins/eval-source-map-dev-tool-plugin.mdx index 5a207063b913..8b3bfd2d9448 100644 --- a/src/content/plugins/eval-source-map-dev-tool-plugin.mdx +++ b/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. diff --git a/src/content/plugins/source-map-dev-tool-plugin.mdx b/src/content/plugins/source-map-dev-tool-plugin.mdx index 4dd3734ef771..1b3613135a98 100644 --- a/src/content/plugins/source-map-dev-tool-plugin.mdx +++ b/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.