From c6bf963c9dbbe8a3faf254f1ecaac84b152be7b5 Mon Sep 17 00:00:00 2001 From: Raj Date: Thu, 12 Mar 2026 06:33:02 +0000 Subject: [PATCH 1/7] docs: add AssetLoggerPlugin example to writing-a-plugin guide --- src/content/contribute/writing-a-plugin.mdx | 32 +++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.mdx index 5bc297cfcd22..1de76e059b62 100644 --- a/src/content/contribute/writing-a-plugin.mdx +++ b/src/content/contribute/writing-a-plugin.mdx @@ -364,3 +364,35 @@ Various types of hooks supported are : ### Configuration defaults Webpack applies configuration defaults after plugins defaults are applied. This allows plugins to feature their own defaults and provides a way to create configuration preset plugins. + + +### Example: AssetLoggerPlugin + +The following example shows a minimal Webpack plugin that logs all generated assets during compilation. + +```javascript +class AssetLoggerPlugin { + apply(compiler) { + compiler.hooks.emit.tap("AssetLoggerPlugin", (compilation) => { + console.log("Generated assets:"); + + Object.keys(compilation.assets).forEach((assetName) => { + console.log(assetName); + }); + }); + } +} + +module.exports = AssetLoggerPlugin; +``` + +This plugin taps into the `emit` hook of the Webpack compiler and prints the names of all generated assets to the console. It demonstrates how plugins can interact with the compilation process using Webpack hooks. + +For example, when running a Webpack build, the output may look like: + +``` +Generated assets: +main.js +vendor.js +styles.css +``` From 50b2d338c96463ccde00753f8a1efa3d4c0b2b7f Mon Sep 17 00:00:00 2001 From: Raj Date: Thu, 12 Mar 2026 06:57:58 +0000 Subject: [PATCH 2/7] docs: add AssetLoggerPlugin example to writing-a-plugin guide --- src/content/contribute/writing-a-plugin.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.mdx index 1de76e059b62..bd20ac8492d1 100644 --- a/src/content/contribute/writing-a-plugin.mdx +++ b/src/content/contribute/writing-a-plugin.mdx @@ -365,7 +365,6 @@ Various types of hooks supported are : Webpack applies configuration defaults after plugins defaults are applied. This allows plugins to feature their own defaults and provides a way to create configuration preset plugins. - ### Example: AssetLoggerPlugin The following example shows a minimal Webpack plugin that logs all generated assets during compilation. @@ -375,10 +374,9 @@ class AssetLoggerPlugin { apply(compiler) { compiler.hooks.emit.tap("AssetLoggerPlugin", (compilation) => { console.log("Generated assets:"); - - Object.keys(compilation.assets).forEach((assetName) => { + for (const assetName of Object.keys(compilation.assets)) { console.log(assetName); - }); + } }); } } From ad685058ae7b772087601fa421a43aee593a65ea Mon Sep 17 00:00:00 2001 From: Raj Date: Thu, 12 Mar 2026 07:24:47 +0000 Subject: [PATCH 3/7] fix: add language to fenced code block --- src/content/contribute/writing-a-plugin.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.mdx index bd20ac8492d1..a3db6a024475 100644 --- a/src/content/contribute/writing-a-plugin.mdx +++ b/src/content/contribute/writing-a-plugin.mdx @@ -388,7 +388,7 @@ This plugin taps into the `emit` hook of the Webpack compiler and prints the nam For example, when running a Webpack build, the output may look like: -``` +```text Generated assets: main.js vendor.js From da6bdda4fdab649e58699b04d3deb7bf2815fffb Mon Sep 17 00:00:00 2001 From: Raj Date: Thu, 12 Mar 2026 07:46:49 +0000 Subject: [PATCH 4/7] fix: use js language for code block --- src/content/contribute/writing-a-plugin.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.mdx index a3db6a024475..c3757174e8b9 100644 --- a/src/content/contribute/writing-a-plugin.mdx +++ b/src/content/contribute/writing-a-plugin.mdx @@ -369,7 +369,7 @@ Webpack applies configuration defaults after plugins defaults are applied. This The following example shows a minimal Webpack plugin that logs all generated assets during compilation. -```javascript +```js class AssetLoggerPlugin { apply(compiler) { compiler.hooks.emit.tap("AssetLoggerPlugin", (compilation) => { From 84a7a336a18b1610fe085656ecaadad86ca3a527 Mon Sep 17 00:00:00 2001 From: Raj Date: Thu, 12 Mar 2026 14:57:51 +0000 Subject: [PATCH 5/7] fix: replace deprecated emit hook with processAssets --- src/content/contribute/writing-a-plugin.mdx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.mdx index c3757174e8b9..5f3afd7c80d1 100644 --- a/src/content/contribute/writing-a-plugin.mdx +++ b/src/content/contribute/writing-a-plugin.mdx @@ -372,11 +372,19 @@ The following example shows a minimal Webpack plugin that logs all generated ass ```js class AssetLoggerPlugin { apply(compiler) { - compiler.hooks.emit.tap("AssetLoggerPlugin", (compilation) => { - console.log("Generated assets:"); - for (const assetName of Object.keys(compilation.assets)) { - console.log(assetName); - } + compiler.hooks.thisCompilation.tap("AssetLoggerPlugin", (compilation) => { + compilation.hooks.processAssets.tap( + { + name: "AssetLoggerPlugin", + stage: compilation.constructor.PROCESS_ASSETS_STAGE_SUMMARIZE, + }, + (assets) => { + console.log("Generated assets:"); + Object.keys(assets).forEach((assetName) => { + console.log(assetName); + }); + } + ); }); } } From 436f76c3d59ba10a3abd37fb63f86b007ebca9c8 Mon Sep 17 00:00:00 2001 From: Raj Date: Thu, 12 Mar 2026 15:25:05 +0000 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20replace=20.forEach=20with=20for?= =?UTF-8?q?=E2=80=A6of=20in=20AssetLoggerPlugin=20example?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/contribute/writing-a-plugin.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.mdx index 5f3afd7c80d1..a0d44fc56ab4 100644 --- a/src/content/contribute/writing-a-plugin.mdx +++ b/src/content/contribute/writing-a-plugin.mdx @@ -380,10 +380,10 @@ class AssetLoggerPlugin { }, (assets) => { console.log("Generated assets:"); - Object.keys(assets).forEach((assetName) => { + for (const assetName of Object.keys(assets)) { console.log(assetName); - }); - } + } + }, ); }); } From e5ef54ef22becbe483b5a7490bb1b21ac1cfc954 Mon Sep 17 00:00:00 2001 From: Raj Date: Thu, 12 Mar 2026 18:05:02 +0000 Subject: [PATCH 7/7] fix: use Webpack logger in AssetLoggerPlugin example --- src/content/contribute/writing-a-plugin.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/content/contribute/writing-a-plugin.mdx b/src/content/contribute/writing-a-plugin.mdx index a0d44fc56ab4..7e7649b97d7b 100644 --- a/src/content/contribute/writing-a-plugin.mdx +++ b/src/content/contribute/writing-a-plugin.mdx @@ -367,21 +367,22 @@ Webpack applies configuration defaults after plugins defaults are applied. This ### Example: AssetLoggerPlugin -The following example shows a minimal Webpack plugin that logs all generated assets during compilation. +The following example shows a minimal Webpack plugin that logs all generated assets using Webpack’s logger interface. ```js class AssetLoggerPlugin { apply(compiler) { compiler.hooks.thisCompilation.tap("AssetLoggerPlugin", (compilation) => { + const logger = compilation.getLogger("AssetLoggerPlugin"); compilation.hooks.processAssets.tap( { name: "AssetLoggerPlugin", stage: compilation.constructor.PROCESS_ASSETS_STAGE_SUMMARIZE, }, (assets) => { - console.log("Generated assets:"); + logger.info("Generated assets:"); for (const assetName of Object.keys(assets)) { - console.log(assetName); + logger.info(assetName); } }, );