From 3655182a25fbb23737e6bc8d84d23e9102bd0dd2 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Sat, 14 Mar 2026 00:30:34 +0000
Subject: [PATCH 01/24] docs: add blog post for Webpack 5.106 with CSS Modules
 runtime style injection

---
 src/content/blog/2026-03-13-webpack-5-106.mdx | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/content/blog/2026-03-13-webpack-5-106.mdx

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-13-webpack-5-106.mdx
new file mode 100644
index 000000000000..3bad034bc667
--- /dev/null
+++ b/src/content/blog/2026-03-13-webpack-5-106.mdx
@@ -0,0 +1,31 @@
+---
+title: Webpack 5.106
+sort: 20260313
+contributors:
+  - bjohansebas
+---
+
+## CSS Modules with Runtime Style Injection
+
+Webpack now supports `exportType: "style"` for CSS Modules (when `experiments.css: true` is enabled), which allows CSS to be injected into the DOM as a `<style>` (`HTMLStyleElement`) directly from the webpack runtime. This covers the typical use case of `style-loader`, so it is no longer necessary to use `style-loader` to inject styles when using this mode.
+
+Additionally, the CSS Module exports are preserved (for example, the class name mapping in `*.module.css`).
+
+For CSP compatibility, when a nonce has been configured in the webpack runtime (`__webpack_require__.nc`), the `<style>` injected by this mode receives the same nonce via the `nonce` attribute (webpack reuses the nonce provided by the application; it does not generate one automatically).
+
+```js
+module.exports = {
+  experiments: { css: true },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        type: "css/module",
+        parser: {
+          exportType: "style",
+        },
+      },
+    ],
+  },
+};
+```

From 1703a195560ab472719c78dd5b9bea4583aa85cc Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Sat, 14 Mar 2026 01:00:42 +0000
Subject: [PATCH 02/24] docs: add section on plugin validation with
 compiler.hooks.validate in Webpack 5.106 blog post

---
 src/content/blog/2026-03-13-webpack-5-106.mdx | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-13-webpack-5-106.mdx
index 3bad034bc667..773cbd5890a7 100644
--- a/src/content/blog/2026-03-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-13-webpack-5-106.mdx
@@ -5,6 +5,53 @@ contributors:
   - bjohansebas
 ---
 
+## Plugin Validation with `compiler.hooks.validate`
+
+Webpack adds a new top level `validate` option to enable or disable schema validation for webpack configuration, plugin options, and loader options. When validation is disabled, webpack skips these checks, which can reduce overhead in some scenarios, but it also removes important guardrails. Invalid options may only fail later or lead to unexpected behavior.
+
+This change also introduces an internal API so plugins can register validation through `compiler.hooks.validate` and run it with `compiler.validate(...)`, allowing validation behavior to be consistently controlled by the single `validate` flag.
+
+**Defaults**
+
+- In development mode, `validate` defaults to `true`.
+- In production mode, `validate` also defaults to `true`. However, if `experiments.futureDefaults` is enabled, it defaults to `false`.
+
+**Config example**
+
+```js
+module.exports = {
+  // Disable schema validation (webpack config, plugins, and loaders)
+  validate: false,
+
+  // ...rest of config
+};
+```
+
+**Plugin authoring example (respecting `validate: false`)**
+
+```js
+class MyPlugin {
+  constructor(options = {}) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    compiler.hooks.validate.tap("MyPlugin", () => {
+      compiler.validate(
+        () => require("./schema/MyPlugin.json"),
+        this.options,
+        { name: "My Plugin", baseDataPath: "options" },
+        (options) => require("./schema/MyPlugin.check")(options),
+      );
+    });
+
+    // ...normal plugin logic here...
+  }
+}
+
+module.exports = MyPlugin;
+```
+
 ## CSS Modules with Runtime Style Injection
 
 Webpack now supports `exportType: "style"` for CSS Modules (when `experiments.css: true` is enabled), which allows CSS to be injected into the DOM as a `<style>` (`HTMLStyleElement`) directly from the webpack runtime. This covers the typical use case of `style-loader`, so it is no longer necessary to use `style-loader` to inject styles when using this mode.

From 29103a34f7251e43b2939d26ce6a3f5bb3c89318 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Sat, 14 Mar 2026 20:29:34 +0000
Subject: [PATCH 03/24] blog: add section on better tree shaking for CommonJS
 destructuring in Webpack 5.106 blog post

Signed-off-by: GitHub <noreply@github.com>
---
 src/content/blog/2026-03-13-webpack-5-106.mdx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-13-webpack-5-106.mdx
index 773cbd5890a7..1f7dc821c505 100644
--- a/src/content/blog/2026-03-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-13-webpack-5-106.mdx
@@ -76,3 +76,16 @@ module.exports = {
   },
 };
 ```
+
+## Better Tree Shaking for CommonJS Destructuring
+
+Webpack can now statically analyze **destructuring assignments directly from CommonJS `require`** (and `module.require`) and treat only the destructured properties as “referenced exports”, instead of conservatively assuming the whole `exports` object is used. This improves dead-code elimination in optimized builds and can reduce bundle size in codebases that still consume CommonJS modules.
+
+**Examples**
+```js
+// Only `a` is considered referenced
+const { a } = require("./module");
+
+// Also supported
+const { a, b } = module.require("./module");
+```

From 31582b29ac4db12a1bfe6fb774c4c6670cafef73 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Sat, 14 Mar 2026 20:52:37 +0000
Subject: [PATCH 04/24] docs: add support for context option in
 VirtualUrlPlugin for resolving relative imports in virtual modules

---
 src/content/blog/2026-03-13-webpack-5-106.mdx | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-13-webpack-5-106.mdx
index 1f7dc821c505..e9f118407bab 100644
--- a/src/content/blog/2026-03-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-13-webpack-5-106.mdx
@@ -89,3 +89,40 @@ const { a } = require("./module");
 // Also supported
 const { a, b } = module.require("./module");
 ```
+
+## Context Support for VirtualUrlPlugin
+
+`VirtualUrlPlugin` (via `webpack.experiments.schemes.VirtualUrlPlugin`) now supports a `context` option that defines the **base directory used to resolve relative imports inside virtual modules**. This feature is currently **experimental**, as it is part of the `experiments.schemes` API.
+
+This makes virtual modules behave more like real files: code such as `import "./utils"` resolves consistently instead of falling back to `compiler.context` and potentially resolving incorrectly.
+
+`context` can be set per virtual module (inside the module definition) or as a plugin level default. It defaults to `"auto"`, which tries to infer the context from the virtual module id or path; otherwise it falls back to `compiler.context`. Conceptually, when you set `context` for a module, webpack treats that virtual module *as if it lived inside that directory* for resolving relative paths.
+
+For example, if you define a virtual module id `virtual/table.js` with `context: path.join(__dirname, "src/components")`, then its internal `import "./utils"` is resolved as if the file were `src/components/table.js` importing `src/components/utils.js`.
+
+```js
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = {
+  plugins: [
+    new webpack.experiments.schemes.VirtualUrlPlugin(
+      {
+        "src/components/button.js": {
+          context: "auto",
+          source() {
+            return "import { trim } from './utils'; export const button = trim('button ');";
+          }
+        },
+        "virtual/table.js": {
+          context: path.join(__dirname, "src/components"),
+          source() {
+            return "import { trim } from './utils'; export const table = trim('table ');";
+          }
+        }
+      },
+      { context: "auto" }
+    )
+  ]
+};
+```

From 885a773c6c199e6547f6c80497648ae3a4ea8cd6 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Sat, 14 Mar 2026 21:20:50 +0000
Subject: [PATCH 05/24] blog: add experimental JavaScript parsing example with
 oxc-parser in Webpack 5.106 blog post

---
 src/content/blog/2026-03-13-webpack-5-106.mdx | 55 ++++++++++++++++---
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-13-webpack-5-106.mdx
index e9f118407bab..77f9ec063e7c 100644
--- a/src/content/blog/2026-03-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-13-webpack-5-106.mdx
@@ -82,10 +82,13 @@ module.exports = {
 Webpack can now statically analyze **destructuring assignments directly from CommonJS `require`** (and `module.require`) and treat only the destructured properties as “referenced exports”, instead of conservatively assuming the whole `exports` object is used. This improves dead-code elimination in optimized builds and can reduce bundle size in codebases that still consume CommonJS modules.
 
 **Examples**
+
 ```js
 // Only `a` is considered referenced
 const { a } = require("./module");
+```
 
+```js
 // Also supported
 const { a, b } = module.require("./module");
 ```
@@ -96,12 +99,12 @@ const { a, b } = module.require("./module");
 
 This makes virtual modules behave more like real files: code such as `import "./utils"` resolves consistently instead of falling back to `compiler.context` and potentially resolving incorrectly.
 
-`context` can be set per virtual module (inside the module definition) or as a plugin level default. It defaults to `"auto"`, which tries to infer the context from the virtual module id or path; otherwise it falls back to `compiler.context`. Conceptually, when you set `context` for a module, webpack treats that virtual module *as if it lived inside that directory* for resolving relative paths.
+`context` can be set per virtual module (inside the module definition) or as a plugin level default. It defaults to `"auto"`, which tries to infer the context from the virtual module id or path; otherwise it falls back to `compiler.context`. Conceptually, when you set `context` for a module, webpack treats that virtual module _as if it lived inside that directory_ for resolving relative paths.
 
 For example, if you define a virtual module id `virtual/table.js` with `context: path.join(__dirname, "src/components")`, then its internal `import "./utils"` is resolved as if the file were `src/components/table.js` importing `src/components/utils.js`.
 
 ```js
-const path = require("path");
+const path = require("node:path");
 const webpack = require("webpack");
 
 module.exports = {
@@ -112,17 +115,53 @@ module.exports = {
           context: "auto",
           source() {
             return "import { trim } from './utils'; export const button = trim('button ');";
-          }
+          },
         },
         "virtual/table.js": {
           context: path.join(__dirname, "src/components"),
           source() {
             return "import { trim } from './utils'; export const table = trim('table ');";
-          }
-        }
+          },
+        },
       },
-      { context: "auto" }
-    )
-  ]
+      { context: "auto" },
+    ),
+  ],
 };
 ```
+
+## Experimental JavaScript Parsing with `oxc-parser`
+
+Webpack now includes an example demonstrating how to replace the default JavaScript parser with **`oxc-parser`**. This integration should be considered **purely experimental** and is **not recommended for production use**.
+
+Instead, it is intended for **development environments** or **benchmark branches**, allowing the community to experiment with alternative parsing strategies in real projects. This helps evaluate potential improvements in **parse time and build performance**, as well as identify possible **compatibility issues**.
+
+**Example**
+
+The following configuration limits the custom parser to `.js` files:
+
+```js
+"use strict";
+
+const oxcParse = require("./internals/oxc-parse");
+
+/** @type {import("webpack").Configuration} */
+module.exports = {
+  mode: "production",
+  entry: "./src/index.js",
+  module: {
+    rules: [
+      {
+        // Apply the custom parser only to JavaScript files
+        test: /\.js$/,
+        parser: {
+          parse: oxcParse,
+        },
+      },
+    ],
+  },
+};
+```
+
+You can find the full example in the webpack repository:
+[https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js](https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js)

From f04291ae2698d4c6d4390af2e4e744bdb58be174 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 01:37:26 +0000
Subject: [PATCH 06/24] blog: add section on other improvements and bug fixes
 in Webpack 5.106 blog post

---
 src/content/blog/2026-03-13-webpack-5-106.mdx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-13-webpack-5-106.mdx
index 77f9ec063e7c..23be7cd2669a 100644
--- a/src/content/blog/2026-03-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-13-webpack-5-106.mdx
@@ -165,3 +165,16 @@ module.exports = {
 
 You can find the full example in the webpack repository:
 [https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js](https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js)
+
+## Other Improvements and Bug Fixes
+
+- **Webpack-dev-middleware** has released a new major version, [8.0.0](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0). The minimum supported Node.js version is now `20.9.0` and the minimum webpack version is `5.101.0`. The `getFilenameFromUrl` function is now asynchronous, immutable asset caching (`cacheImmutable`) is enabled by default, and a new `forwardError` option allows forwarding errors to the next middleware. Support for plugin usage has also been added, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0).
+- **Webpack-cli** has released a new major version, [7.0.0](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0). The minimum supported Node.js version is now `20.9.0`, and configuration files are loaded via dynamic `import()` by default, which enables native TypeScript configuration support through Node.js type stripping without needing external loaders. The `--node-env` argument has been replaced by `--config-node-env`, and the deprecated programmatic API has been removed. Additionally, configuration freezing is now allowed, graceful shutdown has been improved when file system cache is enabled, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0).
+- **Compression-webpack-plugin**, **html-minimizer-webpack-plugin**, **css-minimizer-webpack-plugin**, **image-minimizer-webpack-plugin**, and other plugins have released new major versions to align their minimum supported Node.js version to `20.9.0`, keeping consistency across the webpack ecosystem alongside the recent major releases of webpack-cli 7 and webpack-dev-middleware 8.
+
+Several bug fixes have been resolved since version [5.105](https://github.com/webpack/webpack/releases/tag/v5.105.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for more details
+
+## Thanks
+
+A big thank you to all our contributors and [sponsors](https://github.com/webpack/webpack?tab=readme-ov-file#sponsoring)
+who made Webpack 5.106 possible. Your support, whether through code contributions, documentation, or financial sponsorship, helps keep Webpack evolving and improving for everyone.

From 032cc1b7f79771990615491fdad410201e5724f6 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 01:44:08 +0000
Subject: [PATCH 07/24] blog: update Webpack 5.106 blog post with new sections
 on ecosystem updates and other improvements

---
 src/content/blog/2026-03-13-webpack-5-106.mdx | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-13-webpack-5-106.mdx
index 23be7cd2669a..27bddd6353e6 100644
--- a/src/content/blog/2026-03-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-13-webpack-5-106.mdx
@@ -5,6 +5,16 @@ contributors:
   - bjohansebas
 ---
 
+Webpack 5.106 introduces plugin validation hooks, runtime style injection for CSS Modules, improved tree shaking for CommonJS, and experimental support for alternative JavaScript parsers.
+ 
+- [Plugin Validation with `compiler.hooks.validate`](#plugin-validation-with-compilerhooksvalidate)
+- [CSS Modules with Runtime Style Injection](#css-modules-with-runtime-style-injection)
+- [Better Tree Shaking for CommonJS Destructuring](#better-tree-shaking-for-commonjs-destructuring)
+- [Context Support for VirtualUrlPlugin](#context-support-for-virtualurlplugin)
+- [Experimental JavaScript Parsing with `oxc-parser`](#experimental-javascript-parsing-with-oxc-parser)
+- [Ecosystem Updates](#ecosystem-updates)
+- [Other Improvements and Bug Fixes](#other-improvements-and-bug-fixes)
+
 ## Plugin Validation with `compiler.hooks.validate`
 
 Webpack adds a new top level `validate` option to enable or disable schema validation for webpack configuration, plugin options, and loader options. When validation is disabled, webpack skips these checks, which can reduce overhead in some scenarios, but it also removes important guardrails. Invalid options may only fail later or lead to unexpected behavior.
@@ -165,14 +175,16 @@ module.exports = {
 
 You can find the full example in the webpack repository:
 [https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js](https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js)
-
-## Other Improvements and Bug Fixes
-
-- **Webpack-dev-middleware** has released a new major version, [8.0.0](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0). The minimum supported Node.js version is now `20.9.0` and the minimum webpack version is `5.101.0`. The `getFilenameFromUrl` function is now asynchronous, immutable asset caching (`cacheImmutable`) is enabled by default, and a new `forwardError` option allows forwarding errors to the next middleware. Support for plugin usage has also been added, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0).
-- **Webpack-cli** has released a new major version, [7.0.0](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0). The minimum supported Node.js version is now `20.9.0`, and configuration files are loaded via dynamic `import()` by default, which enables native TypeScript configuration support through Node.js type stripping without needing external loaders. The `--node-env` argument has been replaced by `--config-node-env`, and the deprecated programmatic API has been removed. Additionally, configuration freezing is now allowed, graceful shutdown has been improved when file system cache is enabled, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0).
+ 
+## Ecosystem Updates
+ 
+- **Webpack-cli** has released a new major version, [7.0.0](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0). The minimum supported Node.js version is now `20.9.0`, and configuration files are loaded via dynamic `import()` by default, which enables native TypeScript configuration support through Node.js type stripping without needing external loaders. The `--node-env` argument has been replaced by `--config-node-env`, and the deprecated programmatic API has been removed. Additionally, configuration freezing is now allowed, graceful shutdown has been improved when file system cache is enabled, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0). 
+- **Webpack-dev-middleware** has released a new major version, [8.0.0](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0). The minimum supported Node.js version is now `20.9.0` and the minimum webpack version is `5.101.0`. The `getFilenameFromUrl` function is now asynchronous, immutable asset caching (`cacheImmutable`) is enabled by default, and a new `forwardError` option allows forwarding errors to the next middleware. Support for plugin usage has also been added, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0). 
 - **Compression-webpack-plugin**, **html-minimizer-webpack-plugin**, **css-minimizer-webpack-plugin**, **image-minimizer-webpack-plugin**, and other plugins have released new major versions to align their minimum supported Node.js version to `20.9.0`, keeping consistency across the webpack ecosystem alongside the recent major releases of webpack-cli 7 and webpack-dev-middleware 8.
-
-Several bug fixes have been resolved since version [5.105](https://github.com/webpack/webpack/releases/tag/v5.105.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for more details
+ 
+## Other Improvements and Bug Fixes
+ 
+Several bug fixes have been resolved since version [5.104](https://github.com/webpack/webpack/releases/tag/v5.104.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for more details.
 
 ## Thanks
 

From 2f7d2b2f3054e4c336ee5276503fa5b1a66ccf71 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 02:03:51 +0000
Subject: [PATCH 08/24] docs: improve

---
 src/content/blog/2026-03-13-webpack-5-106.mdx | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-13-webpack-5-106.mdx
index 27bddd6353e6..ea2f12f30c4a 100644
--- a/src/content/blog/2026-03-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-13-webpack-5-106.mdx
@@ -6,7 +6,7 @@ contributors:
 ---
 
 Webpack 5.106 introduces plugin validation hooks, runtime style injection for CSS Modules, improved tree shaking for CommonJS, and experimental support for alternative JavaScript parsers.
- 
+
 - [Plugin Validation with `compiler.hooks.validate`](#plugin-validation-with-compilerhooksvalidate)
 - [CSS Modules with Runtime Style Injection](#css-modules-with-runtime-style-injection)
 - [Better Tree Shaking for CommonJS Destructuring](#better-tree-shaking-for-commonjs-destructuring)
@@ -23,8 +23,14 @@ This change also introduces an internal API so plugins can register validation t
 
 **Defaults**
 
-- In development mode, `validate` defaults to `true`.
-- In production mode, `validate` also defaults to `true`. However, if `experiments.futureDefaults` is enabled, it defaults to `false`.
+The default value of `validate` depends on the build mode and whether `experiments.futureDefaults` is enabled:
+
+| Mode        | `experiments.futureDefaults` | Default `validate` |
+| ----------- | :--------------------------: | :----------------: |
+| development |           `false`            |       `true`       |
+| development |            `true`            |       `true`       |
+| production  |           `false`            |       `true`       |
+| production  |            `true`            |      `false`       |
 
 **Config example**
 
@@ -175,15 +181,17 @@ module.exports = {
 
 You can find the full example in the webpack repository:
 [https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js](https://github.com/webpack/webpack/blob/main/examples/custom-javascript-parser/webpack.config.js)
- 
+
 ## Ecosystem Updates
- 
-- **Webpack-cli** has released a new major version, [7.0.0](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0). The minimum supported Node.js version is now `20.9.0`, and configuration files are loaded via dynamic `import()` by default, which enables native TypeScript configuration support through Node.js type stripping without needing external loaders. The `--node-env` argument has been replaced by `--config-node-env`, and the deprecated programmatic API has been removed. Additionally, configuration freezing is now allowed, graceful shutdown has been improved when file system cache is enabled, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0). 
-- **Webpack-dev-middleware** has released a new major version, [8.0.0](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0). The minimum supported Node.js version is now `20.9.0` and the minimum webpack version is `5.101.0`. The `getFilenameFromUrl` function is now asynchronous, immutable asset caching (`cacheImmutable`) is enabled by default, and a new `forwardError` option allows forwarding errors to the next middleware. Support for plugin usage has also been added, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0). 
+
+- **Webpack-cli** has released a new major version, [7.0.0](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0). The minimum supported Node.js version is now `20.9.0`, and configuration files are loaded via dynamic `import()` by default, which enables native TypeScript configuration support through Node.js type stripping without needing external loaders.
+  The `--node-env` argument has been replaced by `--config-node-env`, and the deprecated programmatic API has been removed. Additionally, configuration freezing is now allowed, graceful shutdown has been improved when file system cache is enabled, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%407.0.0).
+- **Webpack-dev-middleware** has released a new major version, [8.0.0](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0). The minimum supported Node.js version is now `20.9.0` and the minimum webpack version is `5.101.0`. The `getFilenameFromUrl` function is now asynchronous, immutable asset caching (`cacheImmutable`) is enabled by default, and a new `forwardError` option allows forwarding errors to the next middleware.
+  Support for plugin usage has also been added, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0).
 - **Compression-webpack-plugin**, **html-minimizer-webpack-plugin**, **css-minimizer-webpack-plugin**, **image-minimizer-webpack-plugin**, and other plugins have released new major versions to align their minimum supported Node.js version to `20.9.0`, keeping consistency across the webpack ecosystem alongside the recent major releases of webpack-cli 7 and webpack-dev-middleware 8.
- 
+
 ## Other Improvements and Bug Fixes
- 
+
 Several bug fixes have been resolved since version [5.104](https://github.com/webpack/webpack/releases/tag/v5.104.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for more details.
 
 ## Thanks

From f109d0d564583edeaa6b09d272b4210c13146acc Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 02:31:58 +0000
Subject: [PATCH 09/24] blog: enhance Better Tree Shaking section with examples
 for CommonJS destructuring

---
 src/content/blog/2026-03-13-webpack-5-106.mdx | 41 ++++++++++++++++---
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-13-webpack-5-106.mdx
index ea2f12f30c4a..7de3ef86eab6 100644
--- a/src/content/blog/2026-03-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-13-webpack-5-106.mdx
@@ -95,17 +95,48 @@ module.exports = {
 
 ## Better Tree Shaking for CommonJS Destructuring
 
-Webpack can now statically analyze **destructuring assignments directly from CommonJS `require`** (and `module.require`) and treat only the destructured properties as “referenced exports”, instead of conservatively assuming the whole `exports` object is used. This improves dead-code elimination in optimized builds and can reduce bundle size in codebases that still consume CommonJS modules.
+Webpack can now statically analyze **destructuring assignments directly from CommonJS `require`** (and `module.require`) and treat only the destructured properties as "referenced exports", instead of conservatively assuming the whole `exports` object is used. This improves dead-code elimination in optimized builds and can reduce bundle size in codebases that still consume CommonJS modules.
 
-**Examples**
+Consider a module that exports multiple functions, and a consumer that only destructures one of them:
 
 ```js
-// Only `a` is considered referenced
-const { a } = require("./module");
+// math.js
+exports.add = (a, b) => a + b;
+exports.divide = (a, b) => a / b;
+exports.multiply = (a, b) => a * b;
+exports.subtract = (a, b) => a - b;
 ```
 
 ```js
-// Also supported
+// app.js
+const { add } = require("./math");
+
+console.log(add(2, 3));
+```
+
+In previous versions, webpack treated `require("./math")` as referencing the entire exports object. All four functions were included in the bundle even though only `add` is used:
+
+```js
+// Bundled output (5.105 — simplified)
+const math = {
+  add: (a, b) => a + b,
+  subtract: (a, b) => a - b,
+  multiply: (a, b) => a * b,
+  divide: (a, b) => a / b,
+};
+```
+
+Starting with 5.106, webpack recognizes the destructuring pattern and marks only `add` as referenced. The unused exports are eliminated during optimization:
+
+```js
+// Bundled output (5.106 — simplified)
+const math_add = (a, b) => a + b;
+// subtract, multiply, divide - tree-shaken away
+```
+
+This also works with `module.require`:
+
+```js
 const { a, b } = module.require("./module");
 ```
 

From d0c5f2f6366a0144b415e290dc2429aefd2f7ae7 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 02:36:59 +0000
Subject: [PATCH 10/24] rename file with new date

---
 ...026-03-13-webpack-5-106.mdx => 2026-03-22-webpack-5-106.mdx} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/content/blog/{2026-03-13-webpack-5-106.mdx => 2026-03-22-webpack-5-106.mdx} (99%)

diff --git a/src/content/blog/2026-03-13-webpack-5-106.mdx b/src/content/blog/2026-03-22-webpack-5-106.mdx
similarity index 99%
rename from src/content/blog/2026-03-13-webpack-5-106.mdx
rename to src/content/blog/2026-03-22-webpack-5-106.mdx
index 7de3ef86eab6..343502e59509 100644
--- a/src/content/blog/2026-03-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-22-webpack-5-106.mdx
@@ -1,6 +1,6 @@
 ---
 title: Webpack 5.106
-sort: 20260313
+sort: 20260322
 contributors:
   - bjohansebas
 ---

From 643994da3b492c87d6ff9821c04987401dec68c6 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 02:50:24 +0000
Subject: [PATCH 11/24] blog: refine introduction and update section titles for
 Webpack 5.106

---
 src/content/blog/2026-03-22-webpack-5-106.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/content/blog/2026-03-22-webpack-5-106.mdx b/src/content/blog/2026-03-22-webpack-5-106.mdx
index 343502e59509..197881cb6647 100644
--- a/src/content/blog/2026-03-22-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-22-webpack-5-106.mdx
@@ -5,7 +5,9 @@ contributors:
   - bjohansebas
 ---
 
-Webpack 5.106 introduces plugin validation hooks, runtime style injection for CSS Modules, improved tree shaking for CommonJS, and experimental support for alternative JavaScript parsers.
+**Webpack 5.106 introduces plugin validation hooks, built-in runtime style injection for CSS Modules, smarter tree shaking for CommonJS destructuring, and an experimental integration with `oxc-parser` for faster JavaScript parsing.**
+
+Explore what's new in this release:
 
 - [Plugin Validation with `compiler.hooks.validate`](#plugin-validation-with-compilerhooksvalidate)
 - [CSS Modules with Runtime Style Injection](#css-modules-with-runtime-style-injection)

From 3222983855c137fbcc73e7031522c2ab7d538a1b Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 02:57:11 +0000
Subject: [PATCH 12/24] blog: enhance Plugin Validation section with detailed
 explanation and examples

---
 src/content/blog/2026-03-22-webpack-5-106.mdx | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/content/blog/2026-03-22-webpack-5-106.mdx b/src/content/blog/2026-03-22-webpack-5-106.mdx
index 197881cb6647..078b12d9eaec 100644
--- a/src/content/blog/2026-03-22-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-22-webpack-5-106.mdx
@@ -19,13 +19,18 @@ Explore what's new in this release:
 
 ## Plugin Validation with `compiler.hooks.validate`
 
-Webpack adds a new top level `validate` option to enable or disable schema validation for webpack configuration, plugin options, and loader options. When validation is disabled, webpack skips these checks, which can reduce overhead in some scenarios, but it also removes important guardrails. Invalid options may only fail later or lead to unexpected behavior.
+Webpack adds a new top-level `validate` option and a `compiler.hooks.validate` hook that standardize how schema validation works across webpack configuration, plugins, and loaders.
 
-This change also introduces an internal API so plugins can register validation through `compiler.hooks.validate` and run it with `compiler.validate(...)`, allowing validation behavior to be consistently controlled by the single `validate` flag.
+Until now, there was no unified way for plugins to integrate schema validation into the webpack build lifecycle. Each plugin handled validation on its own. The new `compiler.hooks.validate` hook gives plugin authors a standard API to register their validation logic, and `compiler.validate(...)` to run it. This means all validation (from webpack's core config to every plugin that adopts the hook) is controlled by a single `validate` flag and follows the same patterns:
 
-**Defaults**
+```js
+module.exports = {
+  // Disable schema validation (webpack config, plugins, and loaders)
+  validate: false,
+};
+```
 
-The default value of `validate` depends on the build mode and whether `experiments.futureDefaults` is enabled:
+The default value depends on the build mode:
 
 | Mode        | `experiments.futureDefaults` | Default `validate` |
 | ----------- | :--------------------------: | :----------------: |
@@ -34,18 +39,7 @@ The default value of `validate` depends on the build mode and whether `experimen
 | production  |           `false`            |       `true`       |
 | production  |            `true`            |      `false`       |
 
-**Config example**
-
-```js
-module.exports = {
-  // Disable schema validation (webpack config, plugins, and loaders)
-  validate: false,
-
-  // ...rest of config
-};
-```
-
-**Plugin authoring example (respecting `validate: false`)**
+For plugin authors, integrating validation is straightforward. Register a tap on `compiler.hooks.validate`, and webpack takes care of the rest — including skipping validation entirely when the user sets `validate: false`:
 
 ```js
 class MyPlugin {
@@ -70,6 +64,10 @@ class MyPlugin {
 module.exports = MyPlugin;
 ```
 
+When `validate` is `true` and something is wrong, webpack throws a clear error at compile time.
+
+When `validate` is `false`, that check is skipped entirely. The build may still fail later with a less obvious error, so use this option with care.
+
 ## CSS Modules with Runtime Style Injection
 
 Webpack now supports `exportType: "style"` for CSS Modules (when `experiments.css: true` is enabled), which allows CSS to be injected into the DOM as a `<style>` (`HTMLStyleElement`) directly from the webpack runtime. This covers the typical use case of `style-loader`, so it is no longer necessary to use `style-loader` to inject styles when using this mode.

From 550874171b70b4b3dcb08093f112df0ef9b27aaf Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 03:00:05 +0000
Subject: [PATCH 13/24] docs: improve

---
 src/content/blog/2026-03-22-webpack-5-106.mdx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/content/blog/2026-03-22-webpack-5-106.mdx b/src/content/blog/2026-03-22-webpack-5-106.mdx
index 078b12d9eaec..4e1cd103a4df 100644
--- a/src/content/blog/2026-03-22-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-22-webpack-5-106.mdx
@@ -9,13 +9,13 @@ contributors:
 
 Explore what's new in this release:
 
-- [Plugin Validation with `compiler.hooks.validate`](#plugin-validation-with-compilerhooksvalidate)
-- [CSS Modules with Runtime Style Injection](#css-modules-with-runtime-style-injection)
-- [Better Tree Shaking for CommonJS Destructuring](#better-tree-shaking-for-commonjs-destructuring)
-- [Context Support for VirtualUrlPlugin](#context-support-for-virtualurlplugin)
-- [Experimental JavaScript Parsing with `oxc-parser`](#experimental-javascript-parsing-with-oxc-parser)
-- [Ecosystem Updates](#ecosystem-updates)
-- [Other Improvements and Bug Fixes](#other-improvements-and-bug-fixes)
+- [**Plugin Validation with `compiler.hooks.validate`**](#plugin-validation-with-compilerhooksvalidate)
+- [**CSS Modules with Runtime Style Injection**](#css-modules-with-runtime-style-injection)
+- [**Better Tree Shaking for CommonJS Destructuring**](#better-tree-shaking-for-commonjs-destructuring)
+- [**Context Support for VirtualUrlPlugin**](#context-support-for-virtualurlplugin)
+- [**Experimental JavaScript Parsing with `oxc-parser`**](#experimental-javascript-parsing-with-oxc-parser)
+- [**Ecosystem Updates**](#ecosystem-updates)
+- [**Bug Fixes**](#bug-fixes)
 
 ## Plugin Validation with `compiler.hooks.validate`
 
@@ -221,9 +221,9 @@ You can find the full example in the webpack repository:
   Support for plugin usage has also been added, and general performance improvements have been made. Check the [release for more information](https://github.com/webpack/webpack-dev-middleware/releases/tag/v8.0.0).
 - **Compression-webpack-plugin**, **html-minimizer-webpack-plugin**, **css-minimizer-webpack-plugin**, **image-minimizer-webpack-plugin**, and other plugins have released new major versions to align their minimum supported Node.js version to `20.9.0`, keeping consistency across the webpack ecosystem alongside the recent major releases of webpack-cli 7 and webpack-dev-middleware 8.
 
-## Other Improvements and Bug Fixes
+## Bug Fixes
 
-Several bug fixes have been resolved since version [5.104](https://github.com/webpack/webpack/releases/tag/v5.104.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for more details.
+Several bug fixes have been resolved since version [5.104](https://github.com/webpack/webpack/releases/tag/v5.104.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for all the details.
 
 ## Thanks
 

From bdb761d147b2adcb0ee10ffcf3180e41b9a55ce4 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 03:04:13 +0000
Subject: [PATCH 14/24] fixup!

---
 src/content/blog/2026-03-22-webpack-5-106.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/blog/2026-03-22-webpack-5-106.mdx b/src/content/blog/2026-03-22-webpack-5-106.mdx
index 4e1cd103a4df..253915450d1a 100644
--- a/src/content/blog/2026-03-22-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-22-webpack-5-106.mdx
@@ -21,7 +21,7 @@ Explore what's new in this release:
 
 Webpack adds a new top-level `validate` option and a `compiler.hooks.validate` hook that standardize how schema validation works across webpack configuration, plugins, and loaders.
 
-Until now, there was no unified way for plugins to integrate schema validation into the webpack build lifecycle. Each plugin handled validation on its own. The new `compiler.hooks.validate` hook gives plugin authors a standard API to register their validation logic, and `compiler.validate(...)` to run it. This means all validation (from webpack's core config to every plugin that adopts the hook) is controlled by a single `validate` flag and follows the same patterns:
+Until now, there was no unified way for plugins to integrate schema validation into the webpack build lifecycle. Each plugin handled validation on its own. The new `compiler.hooks.validate` hook gives plugin authors a standard API to register their validation logic, and `compiler.validate(...)` to run it. This means all validation from webpack's core config to every plugin that adopts the hook is controlled by a single `validate` flag and follows the same patterns:
 
 ```js
 module.exports = {
@@ -39,7 +39,7 @@ The default value depends on the build mode:
 | production  |           `false`            |       `true`       |
 | production  |            `true`            |      `false`       |
 
-For plugin authors, integrating validation is straightforward. Register a tap on `compiler.hooks.validate`, and webpack takes care of the rest — including skipping validation entirely when the user sets `validate: false`:
+For plugin authors, integrating validation is straightforward. Register a tap on `compiler.hooks.validate`, and webpack takes care of the rest, including skipping validation entirely when the user sets `validate: false`:
 
 ```js
 class MyPlugin {

From f27f038660df7f2b0088c690d9180d6102105fe6 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 03:18:20 +0000
Subject: [PATCH 15/24] blog: update version reference in Bug Fixes section
 from 5.104 to 5.105

---
 src/content/blog/2026-03-22-webpack-5-106.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2026-03-22-webpack-5-106.mdx b/src/content/blog/2026-03-22-webpack-5-106.mdx
index 253915450d1a..ecf4d8cb8562 100644
--- a/src/content/blog/2026-03-22-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-22-webpack-5-106.mdx
@@ -223,7 +223,7 @@ You can find the full example in the webpack repository:
 
 ## Bug Fixes
 
-Several bug fixes have been resolved since version [5.104](https://github.com/webpack/webpack/releases/tag/v5.104.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for all the details.
+Several bug fixes have been resolved since version [5.105](https://github.com/webpack/webpack/releases/tag/v5.105.0). Check the [changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) for all the details.
 
 ## Thanks
 

From aeb81dd5c4581d792f368eccef1f2f69ffaff8ab Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Mon, 23 Mar 2026 03:35:14 +0000
Subject: [PATCH 16/24] blog: add Getting Started section for
 create-webpack-app to guide new users

---
 src/content/blog/2026-03-22-webpack-5-106.mdx | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/content/blog/2026-03-22-webpack-5-106.mdx b/src/content/blog/2026-03-22-webpack-5-106.mdx
index ecf4d8cb8562..28de74b4c1f4 100644
--- a/src/content/blog/2026-03-22-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-22-webpack-5-106.mdx
@@ -12,6 +12,7 @@ Explore what's new in this release:
 - [**Plugin Validation with `compiler.hooks.validate`**](#plugin-validation-with-compilerhooksvalidate)
 - [**CSS Modules with Runtime Style Injection**](#css-modules-with-runtime-style-injection)
 - [**Better Tree Shaking for CommonJS Destructuring**](#better-tree-shaking-for-commonjs-destructuring)
+- [**Getting Started with `create-webpack-app`**](#getting-started-with-create-webpack-app)
 - [**Context Support for VirtualUrlPlugin**](#context-support-for-virtualurlplugin)
 - [**Experimental JavaScript Parsing with `oxc-parser`**](#experimental-javascript-parsing-with-oxc-parser)
 - [**Ecosystem Updates**](#ecosystem-updates)
@@ -140,6 +141,57 @@ This also works with `module.require`:
 const { a, b } = module.require("./module");
 ```
 
+## Getting Started with `create-webpack-app`
+
+[`create-webpack-app`](https://www.npmjs.com/package/create-webpack-app) is now the recommended way to scaffold a new webpack project. Previously, this functionality lived inside `webpack-cli` as the `webpack init` command, but it has been extracted into its own standalone package with the release of webpack-cli 7.
+
+This means you can now create a new webpack project with a single command, without needing to install `webpack-cli` first:
+
+```bash
+npx create-webpack-app
+```
+
+The CLI walks you through an interactive setup where you choose the pieces that fit your project:
+
+```bash
+$ npx create-webpack-app
+
+? Which of the following JS solutions do you want to use? Typescript
+? Do you want to use webpack-dev-server? Yes
+? Do you want to simplify the creation of HTML files for your bundle? Yes
+? Do you want to add PWA support? No
+? Which of the following CSS solutions do you want to use? CSS only
+? Will you be using PostCSS in your project? Yes
+? Do you want to extract CSS for every file? Only for Production
+? Which package manager do you want to use? npm
+
+[create-webpack] ℹ️  Initializing a new Webpack project...
+[create-webpack] ✅ Project dependencies installed successfully!
+```
+
+The generated project includes a working `webpack.config.js`, dev server configuration, and the loader/plugin setup for the options you selected. From there, you can start developing immediately:
+
+```bash
+cd my-project
+npm start
+```
+
+This approach follows the same pattern popularized by tools like `create-react-app` and `create-vite`: a single `npx` command that gets you from zero to a working project without manual configuration.
+
+You can also use the `init` subcommand if you prefer the explicit form:
+
+```bash
+npx create-webpack-app init
+```
+
+Beyond project scaffolding, `create-webpack-app` can also generate the boilerplate for custom loaders and plugins:
+
+```bash
+npx create-webpack-app loader
+
+npx create-webpack-app plugin
+```
+
 ## Context Support for VirtualUrlPlugin
 
 `VirtualUrlPlugin` (via `webpack.experiments.schemes.VirtualUrlPlugin`) now supports a `context` option that defines the **base directory used to resolve relative imports inside virtual modules**. This feature is currently **experimental**, as it is part of the `experiments.schemes` API.

From 7917583fbb4114c95e93c617db717aef9cda611c Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Tue, 31 Mar 2026 15:45:31 +0000
Subject: [PATCH 17/24] rename date

---
 ...026-03-22-webpack-5-106.mdx => 2026-03-31-webpack-5-106.mdx} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/content/blog/{2026-03-22-webpack-5-106.mdx => 2026-03-31-webpack-5-106.mdx} (99%)

diff --git a/src/content/blog/2026-03-22-webpack-5-106.mdx b/src/content/blog/2026-03-31-webpack-5-106.mdx
similarity index 99%
rename from src/content/blog/2026-03-22-webpack-5-106.mdx
rename to src/content/blog/2026-03-31-webpack-5-106.mdx
index 28de74b4c1f4..dd3390900971 100644
--- a/src/content/blog/2026-03-22-webpack-5-106.mdx
+++ b/src/content/blog/2026-03-31-webpack-5-106.mdx
@@ -1,6 +1,6 @@
 ---
 title: Webpack 5.106
-sort: 20260322
+sort: 20260331
 contributors:
   - bjohansebas
 ---

From 87c8b887cc22cb7efc2951474ff40e0b7737db50 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Tue, 31 Mar 2026 16:02:34 +0000
Subject: [PATCH 18/24] rename file

---
 ...026-03-31-webpack-5-106.mdx => 2026-04-02-webpack-5-106.mdx} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/content/blog/{2026-03-31-webpack-5-106.mdx => 2026-04-02-webpack-5-106.mdx} (99%)

diff --git a/src/content/blog/2026-03-31-webpack-5-106.mdx b/src/content/blog/2026-04-02-webpack-5-106.mdx
similarity index 99%
rename from src/content/blog/2026-03-31-webpack-5-106.mdx
rename to src/content/blog/2026-04-02-webpack-5-106.mdx
index dd3390900971..9fe36222e53d 100644
--- a/src/content/blog/2026-03-31-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-02-webpack-5-106.mdx
@@ -1,6 +1,6 @@
 ---
 title: Webpack 5.106
-sort: 20260331
+sort: 20260402
 contributors:
   - bjohansebas
 ---

From 54e18470bb93ff90ea196e20c6a34f7eed19f9f1 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 2 Apr 2026 21:34:25 +0000
Subject: [PATCH 19/24] blog: add Webpack 5.106 release notes with new features
 and improvements

---
 ...026-04-02-webpack-5-106.mdx => 2026-04-13-webpack-5-106.mdx} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/content/blog/{2026-04-02-webpack-5-106.mdx => 2026-04-13-webpack-5-106.mdx} (99%)

diff --git a/src/content/blog/2026-04-02-webpack-5-106.mdx b/src/content/blog/2026-04-13-webpack-5-106.mdx
similarity index 99%
rename from src/content/blog/2026-04-02-webpack-5-106.mdx
rename to src/content/blog/2026-04-13-webpack-5-106.mdx
index 9fe36222e53d..afd9c1cf21ad 100644
--- a/src/content/blog/2026-04-02-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-13-webpack-5-106.mdx
@@ -1,6 +1,6 @@
 ---
 title: Webpack 5.106
-sort: 20260402
+sort: 20260413
 contributors:
   - bjohansebas
 ---

From bcda294c3ffee1d440fb90bb7a57b604dd247d0b Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 2 Apr 2026 21:46:30 +0000
Subject: [PATCH 20/24] blog: update Webpack 5.106 release notes to include
 source-phase imports for WebAssembly

---
 src/content/blog/2026-04-13-webpack-5-106.mdx | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/content/blog/2026-04-13-webpack-5-106.mdx b/src/content/blog/2026-04-13-webpack-5-106.mdx
index afd9c1cf21ad..7decea20af38 100644
--- a/src/content/blog/2026-04-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-13-webpack-5-106.mdx
@@ -5,13 +5,14 @@ contributors:
   - bjohansebas
 ---
 
-**Webpack 5.106 introduces plugin validation hooks, built-in runtime style injection for CSS Modules, smarter tree shaking for CommonJS destructuring, and an experimental integration with `oxc-parser` for faster JavaScript parsing.**
+**Webpack 5.106 introduces plugin validation hooks, built-in runtime style injection for CSS Modules, smarter tree shaking for CommonJS destructuring, source-phase imports for WebAssembly modules, and an experimental integration with `oxc-parser` for faster JavaScript parsing.**
 
 Explore what's new in this release:
 
 - [**Plugin Validation with `compiler.hooks.validate`**](#plugin-validation-with-compilerhooksvalidate)
 - [**CSS Modules with Runtime Style Injection**](#css-modules-with-runtime-style-injection)
 - [**Better Tree Shaking for CommonJS Destructuring**](#better-tree-shaking-for-commonjs-destructuring)
+- [**Source Phase Imports for WebAssembly (Experimental)**](#source-phase-imports-for-webassembly-experimental)
 - [**Getting Started with `create-webpack-app`**](#getting-started-with-create-webpack-app)
 - [**Context Support for VirtualUrlPlugin**](#context-support-for-virtualurlplugin)
 - [**Experimental JavaScript Parsing with `oxc-parser`**](#experimental-javascript-parsing-with-oxc-parser)
@@ -141,6 +142,38 @@ This also works with `module.require`:
 const { a, b } = module.require("./module");
 ```
 
+## Source Phase Imports for WebAssembly (Experimental)
+
+Webpack now includes experimental support for TC39 [Source Phase Imports](https://github.com/tc39/proposal-source-phase-imports) when importing WebAssembly modules.
+
+The proposal is currently at **Stage 3** and introduces a way to import a module at the _source phase_ instead of immediately evaluating it. In practical terms for WebAssembly, this means you can obtain a compiled `WebAssembly.Module` first, and instantiate it later with your own imports.
+
+Enable the feature with `experiments.sourceImport`:
+
+```js
+module.exports = {
+  experiments: {
+    asyncWebAssembly: true,
+    sourceImport: true,
+  },
+};
+```
+
+Then use either static or dynamic source-phase syntax:
+
+```js
+// Static form
+import source wasmModule from "./module.wasm";
+
+// Dynamic form
+const wasmModule2 = await import.source("./module.wasm");
+
+const instance = await WebAssembly.instantiate(wasmModule);
+```
+
+You can also see an end-to-end example in webpack's repository:
+[https://github.com/webpack/webpack/tree/main/examples/wasm-simple-source-phase](https://github.com/webpack/webpack/tree/main/examples/wasm-simple-source-phase)
+
 ## Getting Started with `create-webpack-app`
 
 [`create-webpack-app`](https://www.npmjs.com/package/create-webpack-app) is now the recommended way to scaffold a new webpack project. Previously, this functionality lived inside `webpack-cli` as the `webpack init` command, but it has been extracted into its own standalone package with the release of webpack-cli 7.

From f961c94ded57edbdeec48ae5666fe60e2a0e1e06 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 2 Apr 2026 22:11:35 +0000
Subject: [PATCH 21/24] fixup!

---
 src/content/blog/2026-04-13-webpack-5-106.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/content/blog/2026-04-13-webpack-5-106.mdx b/src/content/blog/2026-04-13-webpack-5-106.mdx
index 7decea20af38..4f820fbbdc2f 100644
--- a/src/content/blog/2026-04-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-13-webpack-5-106.mdx
@@ -95,6 +95,8 @@ module.exports = {
 };
 ```
 
+T> CSS support is more than ready, and it is expected to be fully finalized in the next minor release, as planned in the roadmap. As part of this transition, `css-loader`, `style-loader`, and `mini-css-extract-plugin` will be deprecated.
+
 ## Better Tree Shaking for CommonJS Destructuring
 
 Webpack can now statically analyze **destructuring assignments directly from CommonJS `require`** (and `module.require`) and treat only the destructured properties as "referenced exports", instead of conservatively assuming the whole `exports` object is used. This improves dead-code elimination in optimized builds and can reduce bundle size in codebases that still consume CommonJS modules.
@@ -161,7 +163,7 @@ module.exports = {
 
 Then use either static or dynamic source-phase syntax:
 
-```js
+```text
 // Static form
 import source wasmModule from "./module.wasm";
 

From 4b1a9db749aa8f4c9198ea5523139f1f684c54f0 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 2 Apr 2026 22:16:24 +0000
Subject: [PATCH 22/24] docs: more improvents

---
 src/content/blog/2026-04-13-webpack-5-106.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/content/blog/2026-04-13-webpack-5-106.mdx b/src/content/blog/2026-04-13-webpack-5-106.mdx
index 4f820fbbdc2f..6ad44d805c7a 100644
--- a/src/content/blog/2026-04-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-13-webpack-5-106.mdx
@@ -95,7 +95,7 @@ module.exports = {
 };
 ```
 
-T> CSS support is more than ready, and it is expected to be fully finalized in the next minor release, as planned in the roadmap. As part of this transition, `css-loader`, `style-loader`, and `mini-css-extract-plugin` will be deprecated.
+W> CSS support has matured significantly and is expected to be fully finalized in the next minor release, as planned in the roadmap. As part of this transition, `css-loader`, `style-loader`, and `mini-css-extract-plugin` are planned for deprecation.
 
 ## Better Tree Shaking for CommonJS Destructuring
 
@@ -150,6 +150,8 @@ Webpack now includes experimental support for TC39 [Source Phase Imports](https:
 
 The proposal is currently at **Stage 3** and introduces a way to import a module at the _source phase_ instead of immediately evaluating it. In practical terms for WebAssembly, this means you can obtain a compiled `WebAssembly.Module` first, and instantiate it later with your own imports.
 
+In webpack 5.106, this experimental support is focused on WebAssembly source imports under `experiments.sourceImport`. In the next minor release, the focus is expected to shift toward JavaScript support.
+
 Enable the feature with `experiments.sourceImport`:
 
 ```js

From 6f66841e98c8c1934deb7a2e987c62b359fc542a Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 9 Apr 2026 03:06:42 +0000
Subject: [PATCH 23/24] update date of the blog

---
 ...026-04-13-webpack-5-106.mdx => 2026-04-08-webpack-5-106.mdx} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/content/blog/{2026-04-13-webpack-5-106.mdx => 2026-04-08-webpack-5-106.mdx} (99%)

diff --git a/src/content/blog/2026-04-13-webpack-5-106.mdx b/src/content/blog/2026-04-08-webpack-5-106.mdx
similarity index 99%
rename from src/content/blog/2026-04-13-webpack-5-106.mdx
rename to src/content/blog/2026-04-08-webpack-5-106.mdx
index 6ad44d805c7a..119f1aab834b 100644
--- a/src/content/blog/2026-04-13-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-08-webpack-5-106.mdx
@@ -1,6 +1,6 @@
 ---
 title: Webpack 5.106
-sort: 20260413
+sort: 20260408
 contributors:
   - bjohansebas
 ---

From 994e9e6507441094a0159b045377dc8adefb5916 Mon Sep 17 00:00:00 2001
From: Sebastian Beltran <bjohansebas@gmail.com>
Date: Thu, 9 Apr 2026 03:22:29 +0000
Subject: [PATCH 24/24] add link

---
 src/content/blog/2026-04-08-webpack-5-106.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2026-04-08-webpack-5-106.mdx b/src/content/blog/2026-04-08-webpack-5-106.mdx
index 119f1aab834b..4c94088764ff 100644
--- a/src/content/blog/2026-04-08-webpack-5-106.mdx
+++ b/src/content/blog/2026-04-08-webpack-5-106.mdx
@@ -21,7 +21,7 @@ Explore what's new in this release:
 
 ## Plugin Validation with `compiler.hooks.validate`
 
-Webpack adds a new top-level `validate` option and a `compiler.hooks.validate` hook that standardize how schema validation works across webpack configuration, plugins, and loaders.
+Webpack adds a new top-level `validate` option and a [`compiler.hooks.validate`](/api/compiler-hooks/#validate) hook that standardize how schema validation works across webpack configuration, plugins, and loaders.
 
 Until now, there was no unified way for plugins to integrate schema validation into the webpack build lifecycle. Each plugin handled validation on its own. The new `compiler.hooks.validate` hook gives plugin authors a standard API to register their validation logic, and `compiler.validate(...)` to run it. This means all validation from webpack's core config to every plugin that adopts the hook is controlled by a single `validate` flag and follows the same patterns: