From 683de33e681e4d06b95d01a20b78832d94f9b66e Mon Sep 17 00:00:00 2001 From: alexander-akait Date: Wed, 1 Oct 2025 18:38:22 +0300 Subject: [PATCH] docs: v5.102.0 --- src/content/api/normalmodulefactory-hooks.mdx | 1 + src/content/awesome-webpack.mdx | 1 - src/content/configuration/devtool.mdx | 3 +- src/content/configuration/experiments.mdx | 19 +- src/content/configuration/module.mdx | 34 ++- src/content/configuration/other-options.mdx | 14 ++ src/content/guides/asset-modules.mdx | 193 +++++++++++------- src/content/loaders/index.mdx | 1 - 8 files changed, 168 insertions(+), 98 deletions(-) diff --git a/src/content/api/normalmodulefactory-hooks.mdx b/src/content/api/normalmodulefactory-hooks.mdx index 39c33fb3a7ba..18617f126760 100644 --- a/src/content/api/normalmodulefactory-hooks.mdx +++ b/src/content/api/normalmodulefactory-hooks.mdx @@ -152,3 +152,4 @@ Possible default identifiers: 5. `asset/source` 6. `asset/resource` 7. `asset/inline` +8. `asset/bytes` diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx index 6815d5774cf4..af930f388254 100644 --- a/src/content/awesome-webpack.mdx +++ b/src/content/awesome-webpack.mdx @@ -95,7 +95,6 @@ _People passionate about Webpack (In no particular order)_ - [Worker Loader](https://github.com/webpack/worker-loader): Worker loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [Resolve URL Loader](https://github.com/bholloway/resolve-url-loader): Resolves relative paths in url() statements. -- _Maintainer_: `Ben Holloway` [![Github][githubicon]](https://github.com/bholloway) - [Import Loader](https://github.com/webpack/imports-loader): Imports loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) -- [SourceMap Loader](https://github.com/webpack/source-map-loader): Extract sourceMappingURL comments from modules. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [Combine Loader](https://www.npmjs.com/package/webpack-combine-loaders) - Converts a loaders array into a single loader string. -- _Maintainer_: `James Friend` [![Github][githubicon]](https://github.com/jsdf) - [Icon Font Loader](https://github.com/vusion/icon-font-loader) - Converts svgs into font icons in CSS. -- _Maintainer_: `Forrest R. Zhao` [![Github][githubicon]](https://github.com/rainfore) - [Icons Loader](https://www.npmjs.com/package/icons-loader) - Generates an iconfont from SVG dependencies. -- _Maintainer_: `Mike Vercoelen` [![Github][githubicon]](https://github.com/mikevercoelen) diff --git a/src/content/configuration/devtool.mdx b/src/content/configuration/devtool.mdx index ae3a4866392c..6dc63c43daa9 100644 --- a/src/content/configuration/devtool.mdx +++ b/src/content/configuration/devtool.mdx @@ -18,8 +18,7 @@ related: --- This option controls if and how source maps are generated. - -Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`source-map-loader`](/loaders/source-map-loader) to deal with existing source maps. +Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`Rule.extractSourceMap`](/configuration/module/#ruleextractsourcemap) to deal with existing source maps. ## devtool diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index a76407919858..dca8613267cc 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -27,11 +27,11 @@ Available options: - [`css`](#experimentscss) - [`deferImport`](#experimentsdeferimport) - [`futureDefaults`](#experimentsfuturedefaults) -- `layers`: Enable module and chunk layers. - [`lazyCompilation`](#experimentslazycompilation) - [`outputModule`](#experimentsoutputmodule) - `syncWebAssembly`: Support the old WebAssembly like in webpack 4. -- [`topLevelAwait`](#experimentstoplevelawait) +- `layers`: Enable module and chunk layers, removed and works without additional options since `5.102.0`. +- `topLevelAwait`: Transforms a module into an `async` module when an `await` is used at the top level. Starting from webpack version `5.83.0` (however, in versions prior to that, you can enable it by setting `experiments.topLevelAwait` to `true`), this feature is enabled by default, removed and works without additional options since `5.102.0`. **webpack.config.js** @@ -41,7 +41,6 @@ module.exports = { experiments: { asyncWebAssembly: true, buildHttp: true, - layers: true, lazyCompilation: true, outputModule: true, syncWebAssembly: true, @@ -368,17 +367,3 @@ module.exports = { }, }; ``` - -### experiments.topLevelAwait - -`boolean = true` - -The `topLevelAwait` option transforms a module into an `async` module when an `await` is used at the top level. Starting from webpack version `5.83.0`, this feature is enabled by default. However, in versions prior to that, you can enable it by setting `experiments.topLevelAwait` to `true`. - -```js -module.exports = { - experiments: { - topLevelAwait: true, - }, -}; -``` diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx index 17b89833d1e8..70b69b0d6f78 100644 --- a/src/content/configuration/module.mdx +++ b/src/content/configuration/module.mdx @@ -141,6 +141,9 @@ module.exports = { // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string) outputPath: 'cdn-assets/', }, + 'asset/bytes': { + // No generator options are supported for this module type yet + } javascript: { // No generator options are supported for this module type yet }, @@ -249,6 +252,9 @@ module.exports = { 'asset/source': { // ditto }, + 'asset/bytes': { + // ditto + }, javascript: { // Parser options for javascript modules // e.g, enable parsing of require.ensure syntax @@ -1019,6 +1025,28 @@ module.exports = { }; ``` +## Rule.extractSourceMap + +`boolean = false` + +Extracts existing source map data from files (from their `//# sourceMappingURL` comment), useful for preserving the source maps of third-party libraries. + +**webpack.config.js** + +```js +module.exports = { + // ... + module: { + rules: [ + { + test: /\.m?js$/, + extractSourceMap: true, + }, + ], + }, +}; +``` + ## Rule.loader `Rule.loader` is a shortcut to `Rule.use: [ { loader } ]`. See [`Rule.use`](#ruleuse) and [`UseEntry.loader`](#useentry) for details. @@ -1280,11 +1308,11 @@ module.exports = { module: { rules: [ { - test: /\.png/, + test: /\.png$/, type: 'asset/resource', }, { - test: /\.html/, + test: /\.html$/, type: 'asset/resource', generator: { filename: 'static/[hash][ext]', @@ -1444,7 +1472,7 @@ Include all modules that pass test assertion. If you supply a `Rule.test` option `string` -Possible values: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'css/auto'` +Possible values: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'asset/bytes' | 'css' | 'css/auto' | 'css/module' | 'css/global'` `Rule.type` sets the type for a matching module. This prevents defaultRules and their default importing behaviors from occurring. For example, if you want to load a `.json` file through a custom loader, you'd need to set the `type` to `javascript/auto` to bypass webpack's built-in json importing. diff --git a/src/content/configuration/other-options.mdx b/src/content/configuration/other-options.mdx index 05b496f50b2e..b1104e634f3b 100644 --- a/src/content/configuration/other-options.mdx +++ b/src/content/configuration/other-options.mdx @@ -260,6 +260,10 @@ module.exports = { module: { timestamp: true, }, + contextModule: { + hash: true, + timestamp: true, + }, resolve: { timestamp: true, }, @@ -337,6 +341,16 @@ Snapshots for building modules. - `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often). - `timestamp`: Compare timestamps to determine invalidation. +### contextModule + +`object = {hash boolean = true, timestamp boolean = true}` + +Snapshots for building context modules. + +- `hash`: Compare content hashes to determine invalidation (more expensive than `timestamp`, but changes less often). +- `timestamp`: Compare timestamps to determine invalidation. + + ### resolve `object = {hash boolean = true, timestamp boolean = true}` diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx index 3d3206c57d2c..6af7c775666f 100644 --- a/src/content/guides/asset-modules.mdx +++ b/src/content/guides/asset-modules.mdx @@ -8,6 +8,7 @@ contributors: - anshumanv - spence-s - dkdk225 + - alexander-akait related: - title: webpack 5 - Asset Modules url: https://dev.to/smelukov/webpack-5-asset-modules-2o3h @@ -21,11 +22,12 @@ Prior to webpack 5 it was common to use: - [`url-loader`](https://v4.webpack.js.org/loaders/url-loader/) to inline a file into the bundle as a data URI - [`file-loader`](https://v4.webpack.js.org/loaders/file-loader/) to emit a file into the output directory -Asset Modules types replace all of these loaders by adding 4 new module types: +Asset Modules types replace all of these loaders by adding 5 new module types: - `asset/resource` emits a separate file and exports the URL. Previously achievable by using `file-loader`. - `asset/inline` exports a data URI of the asset. Previously achievable by using `url-loader`. - `asset/source` exports the source code of the asset. Previously achievable by using `raw-loader`. +- `asset/bytes` exports a [`Uint8Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) view of the asset. - `asset` automatically chooses between exporting a data URI and emitting a separate file. Previously achievable by using `url-loader` with asset size limit. When using the old assets loaders (i.e. `file-loader`/`url-loader`/`raw-loader`) along with Asset Modules in webpack 5, you might want to stop Asset Modules from processing your assets again as that would result in asset duplication. This can be done by setting the asset's module type to `'javascript/auto'`. @@ -104,7 +106,7 @@ Alternatively, you can do the following in your `App.js` without modifying your import './publicPath.js'; ``` -## Resource assets +## Resource type **webpack.config.js** @@ -121,9 +123,9 @@ module.exports = { + rules: [ + { + test: /\.png/, -+ type: 'asset/resource' -+ } -+ ] ++ type: 'asset/resource', ++ }, ++ ], + }, }; ``` @@ -154,15 +156,15 @@ module.exports = { output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), -+ assetModuleFilename: 'images/[hash][ext][query]' ++ assetModuleFilename: 'images/[hash][ext][query]', }, module: { rules: [ { test: /\.png/, - type: 'asset/resource' - } - ] + type: 'asset/resource', + }, + ], }, }; ``` @@ -177,23 +179,18 @@ module.exports = { output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), -+ assetModuleFilename: 'images/[hash][ext][query]' ++ assetModuleFilename: 'images/[hash][ext][query]', }, module: { rules: [ - { - test: /\.png/, - type: 'asset/resource' -- } -+ }, + { + test: /\.html/, + type: 'asset/resource', + generator: { -+ filename: 'static/[hash][ext][query]' -+ } -+ } - ] ++ filename: 'static/[hash][ext][query]', ++ }, ++ }, + ], }, }; ``` @@ -206,7 +203,7 @@ With this configuration all the `html` files will be emitted into a `static` dir **webpack.config.js** -```diff +```js const path = require('path'); module.exports = { @@ -214,37 +211,24 @@ module.exports = { output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), -- assetModuleFilename: 'images/[hash][ext][query]' }, module: { rules: [ - { -- test: /\.png/, -- type: 'asset/resource' ++ { + test: /\.svg/, -+ type: 'asset/inline' -- }, -+ } -- { -- test: /\.html/, -- type: 'asset/resource', -- generator: { -- filename: 'static/[hash][ext][query]' -- } -- } - ] - } ++ type: 'asset/inline', ++ }, + ], + }, }; ``` **src/index.js** -```diff -- import mainImage from './images/main.png'; -+ import metroMap from './images/metro.svg'; +```js +import metroMap from './images/metro.svg'; -- img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png' -+ block.style.background = `url(${metroMap})`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) +block.style.background = `url(${metroMap})`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) ``` All `.svg` files will be injected into the bundles as data URI. @@ -276,49 +260,42 @@ module.exports = { + dataUrl: content => { + content = content.toString(); + return svgToMiniDataURI(content); -+ } -+ } - } - ] ++ }, ++ }, + }, + ], }, }; ``` Now all `.svg` files will be encoded by `mini-svg-data-uri` package. -## Source assets +## Source type **webpack.config.js** ```diff const path = require('path'); -- const svgToMiniDataURI = require('mini-svg-data-uri'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', - path: path.resolve(__dirname, 'dist') + path: path.resolve(__dirname, 'dist'), }, module: { rules: [ - { -- test: /\.svg/, -- type: 'asset/inline', -- generator: { -- dataUrl: content => { -- content = content.toString(); -- return svgToMiniDataURI(content); -- } -- } ++ { + test: /\.txt/, + type: 'asset/source', - } - ] ++ }, + ], }, }; ``` +T> You don't need to add rules when using `import text from './file.txt' with { type: "text" };` syntax. + **src/example.txt** ```text @@ -327,12 +304,20 @@ Hello world **src/index.js** -```diff -- import metroMap from './images/metro.svg'; -+ import exampleText from './example.txt'; +```js +import exampleText from './example.txt'; + +block.textContent = exampleText; // 'Hello world'; +``` + +Alternative usage: + +**src/index.js** -- block.style.background = `url(${metroMap}); // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) -+ block.textContent = exampleText; // 'Hello world' +```js +import exampleText from './example.txt' with { type: 'text' }; + +block.textContent = exampleText; // 'Hello world'; ``` All `.txt` files will be injected into the bundles as is. @@ -341,6 +326,8 @@ All `.txt` files will be injected into the bundles as is. When using `new URL('./path/to/asset', import.meta.url)`, webpack creates an asset module too. +T> You don't need to add rules when using `const file = new URL('./file.ext', import.meta.url);` syntax. + **src/index.js** ```js @@ -377,7 +364,7 @@ console.log(url.protocol === 'data:'); console.log(url.pathname === ','); ``` -## General asset type +## Asset type **webpack.config.js** @@ -392,11 +379,11 @@ module.exports = { }, module: { rules: [ - { ++ { + test: /\.txt/, + type: 'asset', - } - ] ++ }, + ], }, }; ``` @@ -414,7 +401,7 @@ module.exports = { entry: './src/index.js', output: { filename: 'main.js', - path: path.resolve(__dirname, 'dist') + path: path.resolve(__dirname, 'dist'), }, module: { rules: [ @@ -423,17 +410,75 @@ module.exports = { type: 'asset', + parser: { + dataUrlCondition: { -+ maxSize: 4 * 1024 // 4kb -+ } -+ } - } - ] ++ maxSize: 4 * 1024, // 4kb ++ }, ++ }, + }, + ], }, }; ``` Also you can [specify a function](/configuration/module/#ruleparserdataurlcondition) to decide to inlining a module or not. +## Bytes type + +**webpack.config.js** + +```diff +const path = require('path'); + +module.exports = { + entry: './src/index.js', + output: { + filename: 'main.js', + path: path.resolve(__dirname, 'dist'), + }, + module: { + rules: [ ++ { ++ test: /\.txt/, ++ type: 'asset/bytes', ++ }, + ], + }, +}; +``` + +T> You don't need to add rules when using `import data from './file.ext' with { type: "bytes" };` syntax. + +**src/example.txt** + +```text +Hello world +``` + +**src/index.js** + +```js +import exampleText from './example.txt'; + +const decoder = new TextDecoder('utf-8'); +const textString = decoder.decode(exampleText); // 'Uint8Array' + +block.textContent = exampleText; // 'Hello world'; +``` + +Alternative usage: + +**src/index.js** + +```js +import exampleText from './example.txt' with { type: 'bytes' }; + +const decoder = new TextDecoder('utf-8'); +const textString = decoder.decode(exampleText); // 'Uint8Array' + +block.textContent = exampleText; // 'Hello world'; +``` + +All `.txt` files will be injected into the bundles as is. + ## Replacing Inline Loader Syntax Before Asset Modules and Webpack 5, it was possible to use [inline syntax](https://webpack.js.org/concepts/loaders/#inline) with the legacy loaders mentioned above. diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx index cd24fb520300..2cd5b38042d9 100644 --- a/src/content/loaders/index.mdx +++ b/src/content/loaders/index.mdx @@ -19,7 +19,6 @@ Loaders are activated by using `loadername!` prefixes in `require()` statements, ## Files -- [`val-loader`](/loaders/val-loader) Executes code as module and consider exports as JS code - [`ref-loader`](https://www.npmjs.com/package/ref-loader) Create dependencies between any files manually ## JSON