From 688a9d6c7559f733756981adf265d68ab76a76c2 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Mon, 15 Sep 2025 18:15:14 +0200 Subject: [PATCH 01/23] docs: grunt-webpack mention change (#7658) --- src/content/guides/integrations.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/integrations.mdx b/src/content/guides/integrations.mdx index ece2275d4428..066d1f9452a3 100644 --- a/src/content/guides/integrations.mdx +++ b/src/content/guides/integrations.mdx @@ -51,7 +51,7 @@ module.exports = function (grunt) { }; ``` -For more information, please visit the [repository](https://github.com/webpack-contrib/grunt-webpack). +For more information, please visit the [repository](https://github.com/webpack/grunt-webpack). ## Gulp From 7393225c056151b08018dbfe5e024166296f0b58 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Wed, 1 Oct 2025 18:46:21 +0300 Subject: [PATCH 02/23] docs: v5.102.0 (#7661) --- 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(https://github.com/$%7BmetroMap%7D)`; // url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=) +block.style.background = `url(https://github.com/$%7BmetroMap%7D)`; // 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(https://github.com/$%7BmetroMap%7D); // 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 From d296e68461047de2432b14c7934e6b234cbc3e04 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Sun, 5 Oct 2025 17:14:30 +0200 Subject: [PATCH 03/23] docs: update sass loader links (#7664) --- src/content/api/loaders.mdx | 2 +- src/content/awesome-webpack.mdx | 2 +- src/content/contribute/writing-a-loader.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/api/loaders.mdx b/src/content/api/loaders.mdx index 1739ce5cae50..61c202614257 100644 --- a/src/content/api/loaders.mdx +++ b/src/content/api/loaders.mdx @@ -224,7 +224,7 @@ addDependency(file: string) dependency(file: string) // shortcut ``` -Add an existing file as a dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack-contrib/sass-loader), [`less-loader`](https://github.com/webpack-contrib/less-loader) uses this to recompile whenever any imported `css` file changes. +Add an existing file as a dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack/sass-loader), [`less-loader`](https://github.com/webpack-contrib/less-loader) uses this to recompile whenever any imported `css` file changes. ### this.addMissingDependency diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx index af930f388254..a9646e035d94 100644 --- a/src/content/awesome-webpack.mdx +++ b/src/content/awesome-webpack.mdx @@ -73,7 +73,7 @@ _People passionate about Webpack (In no particular order)_ - [Style Loader](https://github.com/webpack/style-loader): Style loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [PostCSS Loader](https://github.com/postcss/postcss-loader): PostCSS loader for Webpack. -- _Maintainer_: `PostCSS Team` [![Github][githubicon]](https://github.com/postcss) [![Twitter][twittericon]](https://twitter.com/PostCSS) - [CSS Loader](https://github.com/webpack/css-loader): CSS loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) -- [SASS Loader](https://github.com/jtangelder/sass-loader): SASS loader for Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik) +- [SASS Loader](https://github.com/webpack/sass-loader): SASS loader for Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik) - [Less Loader](https://github.com/webpack/less-loader): Less loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [Stylus Loader](https://github.com/shama/stylus-loader): A stylus loader for webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry) - [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader): Isomorphic CSS style loader for Webpack. -- _Maintainer_: `Kriasoft Team` [![Github][githubicon]](https://github.com/kriasoft) [![Twitter][twittericon]](https://twitter.com/kriasoft) diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx index 5f1c3efc444b..baf83642bf4f 100644 --- a/src/content/contribute/writing-a-loader.mdx +++ b/src/content/contribute/writing-a-loader.mdx @@ -273,7 +273,7 @@ JSON.stringify( If the loader you're working on is a simple wrapper around another package, then you should include the package as a `peerDependency`. This approach allows the application's developer to specify the exact version in the `package.json` if desired. -For instance, the `sass-loader` [specifies `node-sass`](https://github.com/webpack-contrib/sass-loader/blob/master/package.json) as peer dependency like so: +For instance, the `sass-loader` [specifies `node-sass`](https://github.com/webpack/sass-loader/blob/main/package.json) as peer dependency like so: ```json { From f57f3607e30d0a9a85c5bcc601aed401df21d3b9 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Sun, 5 Oct 2025 22:44:13 +0200 Subject: [PATCH 04/23] chore: get sass-loader from webpack org (#7666) --- src/utilities/fetch-package-repos.mjs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/utilities/fetch-package-repos.mjs b/src/utilities/fetch-package-repos.mjs index eb92f36a5bbf..db5b4a110cf0 100644 --- a/src/utilities/fetch-package-repos.mjs +++ b/src/utilities/fetch-package-repos.mjs @@ -20,6 +20,11 @@ const fetch = { suffixes: ['-loader'], hides: excludedLoaders, }, + { + organization: 'webpack', + suffixes: ['-loader'], + hides: [], + }, 'babel/babel-loader', ], plugins: [ From 1358332fb04c55102592354eed8729a2e87f64ea Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Mon, 6 Oct 2025 18:34:23 +0200 Subject: [PATCH 05/23] trigger ci (#7669) * chore: add my name to docs * chore: add my name to docs * chore: add my name to docs --- src/content/api/loaders.mdx | 1 + src/content/api/plugins.mdx | 1 + src/content/contribute/writing-a-loader.mdx | 1 + 3 files changed, 3 insertions(+) diff --git a/src/content/api/loaders.mdx b/src/content/api/loaders.mdx index 61c202614257..a9f7033b10ec 100644 --- a/src/content/api/loaders.mdx +++ b/src/content/api/loaders.mdx @@ -15,6 +15,7 @@ contributors: - chenxsan - jamesgeorge007 - alexeyr + - evenstensberg --- A loader is a JavaScript module that exports a function. The [loader runner](https://github.com/webpack/loader-runner) calls this function and passes the result of the previous loader or the resource file into it. The `this` context of the function is filled-in by webpack and the [loader runner](https://github.com/webpack/loader-runner) with some useful methods that allow the loader (among other things) to change its invocation style to async, or get query parameters. diff --git a/src/content/api/plugins.mdx b/src/content/api/plugins.mdx index da1e06c75482..069dc469d14f 100644 --- a/src/content/api/plugins.mdx +++ b/src/content/api/plugins.mdx @@ -10,6 +10,7 @@ contributors: - EugeneHlushko - wizardofhogwarts - snitin315 + - evenstensberg --- Plugins are a key piece of the webpack ecosystem and provide the community with diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx index baf83642bf4f..8b3f12caeffb 100644 --- a/src/content/contribute/writing-a-loader.mdx +++ b/src/content/contribute/writing-a-loader.mdx @@ -9,6 +9,7 @@ contributors: - jamesgeorge007 - chenxsan - dev-itsheng + - evenstensberg --- A loader is a node module that exports a function. This function is called when a resource should be transformed by this loader. The given function will have access to the [Loader API](/api/loaders/) using the `this` context provided to it. From d66124d4e4a6cce9eee187dab7b31f78f708cc75 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Tue, 7 Oct 2025 15:23:54 +0200 Subject: [PATCH 06/23] chore: new less loader link (#7671) * chore: new less loader link * chore: remove mention of me --- src/content/api/loaders.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/api/loaders.mdx b/src/content/api/loaders.mdx index a9f7033b10ec..4c9a2620a260 100644 --- a/src/content/api/loaders.mdx +++ b/src/content/api/loaders.mdx @@ -15,7 +15,6 @@ contributors: - chenxsan - jamesgeorge007 - alexeyr - - evenstensberg --- A loader is a JavaScript module that exports a function. The [loader runner](https://github.com/webpack/loader-runner) calls this function and passes the result of the previous loader or the resource file into it. The `this` context of the function is filled-in by webpack and the [loader runner](https://github.com/webpack/loader-runner) with some useful methods that allow the loader (among other things) to change its invocation style to async, or get query parameters. @@ -225,7 +224,7 @@ addDependency(file: string) dependency(file: string) // shortcut ``` -Add an existing file as a dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack/sass-loader), [`less-loader`](https://github.com/webpack-contrib/less-loader) uses this to recompile whenever any imported `css` file changes. +Add an existing file as a dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack/sass-loader), [`less-loader`](https://github.com/webpack/less-loader) uses this to recompile whenever any imported `css` file changes. ### this.addMissingDependency From b48ccc6456d91d86e0a60a9f39a217a29122fb06 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Tue, 7 Oct 2025 16:41:51 +0200 Subject: [PATCH 07/23] chore: update links from contrib to main org (#7672) * chore: update links from contrib to main org * fix: new test urls --- src/content/awesome-webpack.mdx | 2 +- src/remark-plugins/remark-cleanup-readme/index.test.mjs | 2 +- src/utilities/process-readme.test.mjs | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx index a9646e035d94..905ef9dab932 100644 --- a/src/content/awesome-webpack.mdx +++ b/src/content/awesome-webpack.mdx @@ -71,7 +71,7 @@ _People passionate about Webpack (In no particular order)_ #### Styles - [Style Loader](https://github.com/webpack/style-loader): Style loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) -- [PostCSS Loader](https://github.com/postcss/postcss-loader): PostCSS loader for Webpack. -- _Maintainer_: `PostCSS Team` [![Github][githubicon]](https://github.com/postcss) [![Twitter][twittericon]](https://twitter.com/PostCSS) +- [PostCSS Loader](https://github.com/webpack/postcss-loader): PostCSS loader for Webpack. -- _Maintainer_: `PostCSS Team` [![Github][githubicon]](https://github.com/postcss) [![Twitter][twittericon]](https://twitter.com/PostCSS) - [CSS Loader](https://github.com/webpack/css-loader): CSS loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [SASS Loader](https://github.com/webpack/sass-loader): SASS loader for Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik) - [Less Loader](https://github.com/webpack/less-loader): Less loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) diff --git a/src/remark-plugins/remark-cleanup-readme/index.test.mjs b/src/remark-plugins/remark-cleanup-readme/index.test.mjs index 1d8bd0c2e211..bedbf16e46a0 100644 --- a/src/remark-plugins/remark-cleanup-readme/index.test.mjs +++ b/src/remark-plugins/remark-cleanup-readme/index.test.mjs @@ -39,7 +39,7 @@ describe('cleanup readme', () => { }); it('should clean up nested div[align="center"] block ', () => { - // see https://github.com/webpack-contrib/postcss-loader/blob/master/README.md + // see https://github.com/webpack/postcss-loader/blob/master/README.md const mdxText = `
{ it('rewrite relative url', () => { const options = { source: - 'https://raw.githubusercontent.com/webpack-contrib/postcss-loader/master/README.md', + 'https://raw.githubusercontent.com/webpack/postcss-loader/main/README.md', }; const loaderMDData = 'See the file [`./src/config.d.ts`](./src/config.d.ts).'; expect(processReadme(loaderMDData, options)).toEqual( - 'See the file [`https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts`](https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts).' + 'See the file [`https://github.com/webpack/postcss-loader/main/src/config.d.ts`](https://github.com/webpack/postcss-loader/main/src/config.d.ts).' ); }); it('should preserve comments inside code blocks', () => { const options = { source: - 'https://raw.githubusercontent.com/webpack-contrib/postcss-loader/master/README.md', + 'https://raw.githubusercontent.com/webpack/postcss-loader/main/README.md', }; const loaderMDData = ` From 94ed158d890374139bc8238fb135d4cc9c3fd1c8 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Tue, 7 Oct 2025 17:58:36 +0200 Subject: [PATCH 08/23] chore: migrate from contrib to main in stylus-loader (#7674) --- src/content/awesome-webpack.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx index 905ef9dab932..4239a9324ff3 100644 --- a/src/content/awesome-webpack.mdx +++ b/src/content/awesome-webpack.mdx @@ -75,7 +75,7 @@ _People passionate about Webpack (In no particular order)_ - [CSS Loader](https://github.com/webpack/css-loader): CSS loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) - [SASS Loader](https://github.com/webpack/sass-loader): SASS loader for Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik) - [Less Loader](https://github.com/webpack/less-loader): Less loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack) -- [Stylus Loader](https://github.com/shama/stylus-loader): A stylus loader for webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry) +- [Stylus Loader](https://github.com/webpack/stylus-loader): A stylus loader for webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry) - [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader): Isomorphic CSS style loader for Webpack. -- _Maintainer_: `Kriasoft Team` [![Github][githubicon]](https://github.com/kriasoft) [![Twitter][twittericon]](https://twitter.com/kriasoft) - [Minify CSS-in-JS Loader](https://github.com/zaaack/minify-cssinjs-loader): RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung) - [SASS Resources Loader](https://github.com/shakacode/sass-resources-loader): Globally import SASS resources (variables, mixins, etc.). -- _Maintainer_: `ShakaCode` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode) From 35e33ae3b4c3f629dc5c07636fd98a03051d3746 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Wed, 8 Oct 2025 21:09:03 +0200 Subject: [PATCH 09/23] chore: migrate plugin from core to main org (#7676) --- src/content/awesome-webpack.mdx | 2 +- src/utilities/fetch-package-repos.mjs | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/content/awesome-webpack.mdx b/src/content/awesome-webpack.mdx index 4239a9324ff3..2d00b0d76547 100644 --- a/src/content/awesome-webpack.mdx +++ b/src/content/awesome-webpack.mdx @@ -153,7 +153,7 @@ _People passionate about Webpack (In no particular order)_ - [CSS Cleanup Webpack Plugin](https://github.com/do-web/css-cleanup-webpack-plugin) - A plugin to remove duplicated and unused css rules -- _Maintainer_: `Dominik Weber` [![Github][githubicon]](https://github.com/do-web) - [Extension Reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader) - Hot reloading while developing browser extensions -- _Maintainer_: `Rubens P. G. Cavalcante` [![Github][githubicon]](https://github.com/rubenspgcavalcante) [![Twitter][twittericon]](https://twitter.com/rubenspgc) - [Htmls Webpack Plugin](https://github.com/zaaack/htmls-webpack-plugin): Simple and fast multiple-htmls-generating plugin for webpack. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung) -- [Mini css extract plugin](https://github.com/webpack-contrib/mini-css-extract-plugin): +- [Mini css extract plugin](https://github.com/webpack/mini-css-extract-plugin): Lightweight CSS extraction plugin -- _Maintainer_: `Webpack Contrib` [![Github][githubicon]](https://github.com/webpack-contrib) - [build-hash-webpack-plugin](https://github.com/Cosium/build-hash-webpack-plugin) For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- _Maintainer_: `Réda Housni Alaoui` [![Github][githubicon]](https://github.com/reda-alaoui) [![Twitter][twittericon]](https://twitter.com/alaouirda) - [webpack-hook-plugin](https://github.com/tienne/webpack-hook-plugin) - run any shell commands before or after webpack builds -- _Maintainer_: `David Kwon` [![Github][githubicon]](https://github.com/tienne) diff --git a/src/utilities/fetch-package-repos.mjs b/src/utilities/fetch-package-repos.mjs index db5b4a110cf0..f80187c19d01 100644 --- a/src/utilities/fetch-package-repos.mjs +++ b/src/utilities/fetch-package-repos.mjs @@ -33,6 +33,11 @@ const fetch = { suffixes: ['-webpack-plugin', '-extract-plugin'], hides: excludedPlugins, }, + { + organization: 'webpack', + suffixes: ['-webpack-plugin', '-extract-plugin'], + hides: excludedPlugins, + }, 'yoriiis/svg-chunk-webpack-plugin', 'yoriiis/chunks-webpack-plugin', ], From a77f7fbec383623b9cb6e558611ce0a0bc32cfef Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Thu, 9 Oct 2025 18:25:25 +0200 Subject: [PATCH 10/23] chore: webpack/contrib/terser -> webpack/terser (#7678) --- src/content/configuration/optimization.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx index 6218865980c2..7256d4eb759b 100644 --- a/src/content/configuration/optimization.mdx +++ b/src/content/configuration/optimization.mdx @@ -281,7 +281,7 @@ module.exports = { new TerserPlugin({ parallel: true, terserOptions: { - // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions + // https://github.com/webpack/terser-webpack-plugin#terseroptions }, }), ], From 87f3fa5cb813b766f16fe867daacf19d2ae70028 Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Sat, 11 Oct 2025 17:55:52 +0200 Subject: [PATCH 11/23] chore: remove outdated templates (#7680) --- .github/CODE_OF_CONDUCT.md | 8 -------- .github/FUNDING.yml | 2 -- .github/ISSUE_TEMPLATE.md | 7 ------- .github/PULL_REQUEST_TEMPLATE.md | 11 ----------- 4 files changed, 28 deletions(-) delete mode 100644 .github/CODE_OF_CONDUCT.md delete mode 100644 .github/FUNDING.yml delete mode 100644 .github/ISSUE_TEMPLATE.md delete mode 100644 .github/PULL_REQUEST_TEMPLATE.md diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md deleted file mode 100644 index 70840a86abdd..000000000000 --- a/.github/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,8 +0,0 @@ -## Code of Conduct - -At webpack and all webpack/webpack-contrib repositories we follow the -[JSFoundation Code of Conduct][1]. Please adhere to the guidelines there and -feel free to report any violation of them to the @webpack/core-team, -@webpack/documentation-team, or . - -[1]: https://github.com/openjs-foundation/code-and-learn/blob/master/CODE_OF_CONDUCT.md diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index 1152177bf468..000000000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,2 +0,0 @@ -open_collective: webpack - diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md deleted file mode 100644 index b489f0e6e61f..000000000000 --- a/.github/ISSUE_TEMPLATE.md +++ /dev/null @@ -1,7 +0,0 @@ -- [ ] Check the current issues to ensure you aren't creating a duplicate. -- [ ] Consider making small typo fixes and such directly as pull requests. -- [ ] For the voting application, go to https://github.com/webpack-contrib/voting-app. -- [ ] For the document of Chinese translation（中文版文档), go to https://github.com/docschina/webpack.js.org. -- [ ] For loader/plugin docs, consider opening an issue in the corresponding repository. -- [ ] No existing issue? Go ahead and open a new one. -- **Remove these instructions from your PR as they are for your eyes only.** diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index fb181665c983..000000000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,11 +0,0 @@ -_describe your changes..._ - -- [ ] Read and sign the [CLA][1]. PRs that haven't signed it won't be accepted. -- [ ] Make sure your PR complies with the [writer's guide][2]. -- [ ] Review the diff carefully as sometimes this can reveal issues. -- [ ] Do not abandon your Pull Request: [Stale Pull Requests][3]. -- **Remove these instructions from your PR as they are for your eyes only.** - -[1]: https://github.com/openjs-foundation/EasyCLA#openjs-foundation-cla -[2]: https://webpack.js.org/contribute/writers-guide/ -[3]: https://webpack.js.org/contribute/#pull-requests From fd94d2a4fdcb44567de6ad90e0c5fee3da750b6d Mon Sep 17 00:00:00 2001 From: Even Stensberg Date: Sat, 11 Oct 2025 18:36:13 +0200 Subject: [PATCH 12/23] chore: update module-methods.mdx (#7681) * chore: add adrian to contributors * Update module-methods.mdx Added some clarifications about dynamic expressions in import() and magic comments. * Update module-methods.mdx Fixed lint error: ``` MD013/line-length Line length [Expected: 600; Actual: 628] ``` --------- Co-authored-by: adriancuadrado <29214635+adriancuadrado@users.noreply.github.com> --- src/content/api/module-methods.mdx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/content/api/module-methods.mdx b/src/content/api/module-methods.mdx index c2c095404efb..fd27ca8140b2 100644 --- a/src/content/api/module-methods.mdx +++ b/src/content/api/module-methods.mdx @@ -14,6 +14,7 @@ contributors: - jamesgeorge007 - WofWca - snitin315 + - adriancuadrado related: - title: CommonJS Wikipedia url: https://en.wikipedia.org/wiki/CommonJS @@ -97,7 +98,8 @@ 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 only bundle all `.json` files in the `./locale` directory and subdirectories into the new chunk and exclude files with other file extensions. 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 @@ -111,7 +113,7 @@ T> Using the [`webpackInclude` and `webpackExclude`](/api/module-methods/#magic- #### Magic Comments -Inline comments to make features work. By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do. +By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do. ```js // Single target @@ -137,6 +139,8 @@ import( import(/* webpackIgnore: true */ 'ignored-module.js'); ``` +T> Single line comments (`//`) are also supported. JSDoc comments (`/** */`) are not. + ##### webpackIgnore **JavaScript Usage** From d803b5444a27fb66cbd7a5eeba501b9c43a5b98b Mon Sep 17 00:00:00 2001 From: Zowie Beha <113861530+zowiebeha@users.noreply.github.com> Date: Sat, 11 Oct 2025 18:46:06 -0400 Subject: [PATCH 13/23] docs: update example