From b5850d72cb8059fb8d109ac348f0f82739cdd0c2 Mon Sep 17 00:00:00 2001
From: alexander-akait <4567934+alexander-akait@users.noreply.github.com>
Date: Thu, 27 Aug 2026 16:52:34 +0000
Subject: [PATCH 1/6] docs: state what built-in CSS and HTML actually cover

The loaders and plugins indexes called style-loader, css-loader,
html-loader, MiniCssExtractPlugin and HtmlWebpackPlugin deprecated and
superseded, which overstates it: the built-in support is experimental and
does not cover preprocessors, css-loader's importLoaders, localIdentRegExp,
getJSON and filter callbacks, style-loader's insert, attributes,
styleTagTransform and lazy/singleton injection, html-loader's
scriptingEnabled and postprocessor, or html-webpack-plugin's chunksSortMode,
xhtml, showErrors, cache and plugin-hook ecosystem.

Add a "What's built-in" section to both guides stating the scope as two
columns, and point the index entries at it instead of declaring the
packages superseded. Also scope the favicon claim: webpack emits the icons
it is given, it does not generate size and format variants.
---
 src/content/concepts/loaders.mdx        |  2 +-
 src/content/guides/asset-management.mdx |  2 +-
 src/content/guides/native-css.mdx       | 17 +++++++-
 src/content/guides/native-html.mdx      | 21 +++++++++-
 src/content/loaders/index.mdx           | 10 ++---
 src/content/plugins/index.mdx           | 54 ++++++++++++-------------
 6 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/src/content/concepts/loaders.mdx b/src/content/concepts/loaders.mdx
index 407fe23aea24..8d7232350e04 100644
--- a/src/content/concepts/loaders.mdx
+++ b/src/content/concepts/loaders.mdx
@@ -44,7 +44,7 @@ export default {
 };
 ```
 
-T> Plain `.css` files need no loader at all: webpack parses, extracts and minifies CSS itself — see [`experiments.css`](/configuration/experiments/#experimentscss) and the [Native CSS](/guides/native-css/) guide. A preprocessor still needs its loader, and `type: 'css/auto'` hands what the loader produces to webpack's CSS pipeline.
+T> Plain `.css` files need no loader at all: webpack has experimental built-in CSS support that parses, extracts and minifies CSS itself — see [`experiments.css`](/configuration/experiments/#experimentscss) and the [Native CSS](/guides/native-css/) guide. A preprocessor still needs its loader, and `type: 'css/auto'` hands what the loader produces to webpack's CSS pipeline.
 
 ## Using Loaders
 
diff --git a/src/content/guides/asset-management.mdx b/src/content/guides/asset-management.mdx
index 317bf3d574a5..f2b9ff60318b 100644
--- a/src/content/guides/asset-management.mdx
+++ b/src/content/guides/asset-management.mdx
@@ -70,7 +70,7 @@ Webpack understands CSS on its own, so you can `import` a CSS file from a JavaSc
 import "./style.css";
 ```
 
-Webpack parses the file — resolving its `@import` and `url()` references — and extracts it into a `.css` output file next to your bundle. CSS Modules, minification and content hashes all come from the same built-in support; the [Native CSS](/guides/native-css/) guide covers the whole feature set.
+Webpack parses the file — resolving its `@import` and `url()` references — and extracts it into a `.css` output file next to your bundle. CSS Modules, minification and content hashes all come from the same built-in support, which is still experimental; [What's built-in](/guides/native-css/#whats-built-in) states what it covers and what still needs a loader.
 
 T> Built-in CSS is controlled by [`experiments.css`](/configuration/experiments/#experimentscss), which defaults to `'auto'`: it turns itself on unless a `module.rules` entry with a loader already matches your `.css` files. That means an existing `css-loader` / `style-loader` setup keeps working untouched — see [migrating off the CSS loaders](/guides/native-css/#migration-guide).
 
diff --git a/src/content/guides/native-css.mdx b/src/content/guides/native-css.mdx
index f1a2828a6466..ac880f168295 100644
--- a/src/content/guides/native-css.mdx
+++ b/src/content/guides/native-css.mdx
@@ -25,7 +25,22 @@ export default {
 };
 ```
 
-With this option enabled, webpack understands `.css` files as first-class modules — parsing `@import` and `url()`, extracting stylesheets, generating content hashes, minifying, and supporting CSS Modules — without `css-loader`, `style-loader`, `mini-css-extract-plugin`, or `css-minimizer-webpack-plugin`.
+With this option enabled, webpack understands `.css` files as first-class modules: it parses them itself instead of handing them to a loader.
+
+## What's built-in
+
+"Built-in" means webpack does the work itself, with no loader in the chain — not that it covers everything the CSS loaders do. The scope is exactly this:
+
+| Built in                                                                                           | Still needs a loader or plugin                                                                           |
+| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| Parsing `.css`; resolving `@import` and `url()` / `image-set()` / `src()` / `image()`              | **Preprocessors** — Sass, Less, Stylus and PostCSS always keep their loaders                             |
+| [CSS Modules](#css-modules): `composes`, `@value`, `:export`, `:local()` / `:global()`             | `css-loader`'s `importLoaders`, `localIdentRegExp`, `getJSON`, and the `url` / `import` filter callbacks |
+| [Extracting](#output-modes-exporttype) a `.css` file, or injecting a `<style>` tag at runtime      | `style-loader`'s `insert`, `attributes`, `styleTagTransform`, and its lazy / singleton injection modes   |
+| Content hashes, [minification](#minification) and browserslist [vendor prefixes](#vendor-prefixes) | Anything a PostCSS plugin does beyond `@custom-media` / `@custom-selector`                               |
+| [`@custom-media` and `@custom-selector`](#custom-media-and-custom-selectors)                       |                                                                                                          |
+| Hot Module Replacement for stylesheets                                                             |                                                                                                          |
+
+So a project whose CSS setup is `css-loader` + `style-loader` (or `mini-css-extract-plugin`) with default options needs no CSS loader at all. A project that reaches for the options in the right-hand column keeps that loader for the files that need it — the two can coexist, rule by rule.
 
 T> Since webpack 5.109.0 the option defaults to `'auto'`: built-in CSS support turns on unless a [`module.rules`](/configuration/module/#modulerules) entry with a loader (or an explicit module type) already matches `.css` files. An existing `css-loader` setup therefore keeps working untouched, and you can migrate one rule at a time. Set it to `true` to force the native support, or `false` to switch it off.
 
diff --git a/src/content/guides/native-html.mdx b/src/content/guides/native-html.mdx
index 8f8903d2e35d..6ab588ba6987 100644
--- a/src/content/guides/native-html.mdx
+++ b/src/content/guides/native-html.mdx
@@ -24,7 +24,22 @@ export default {
 };
 ```
 
-With this option enabled, webpack understands `.html` files as first-class modules — parsing tags, resolving every URL they reference, bundling inline `<script>` and `<style>` bodies, emitting hashed assets, and writing the rewritten HTML back out — without `html-loader` or `html-webpack-plugin`.
+With this option enabled, webpack understands `.html` files as first-class modules: it parses them itself instead of handing them to a loader.
+
+## What's built-in
+
+"Built-in" means webpack does the work itself, with no loader or plugin in the chain — not that it covers everything `html-loader` and `html-webpack-plugin` do. The scope is exactly this:
+
+| Built in                                                                                                                | Still needs a loader or plugin                                                                                                        |
+| ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| Parsing `.html`, as an [entry point](#1-html-as-an-entry-point) or [imported from JS](#3-html-imported-from-javascript) | **Template engines** — Pug, EJS, Handlebars and friends, unless a synchronous [`template`](#templating) hook is enough                |
+| [Extracting every URL a page references](#what-webpack-bundles-from-a-page) and rewriting it to the built filename      | `html-loader`'s `sources.scriptingEnabled` and `postprocessor`                                                                        |
+| Bundling inline `<script>` and `<style>` bodies, and `style=""` attributes                                              | `html-webpack-plugin`'s `chunksSortMode`, `xhtml`, `showErrors` and `cache`                                                           |
+| [Generating a page](#2-a-generated-page-for-a-javascript-entry) per entrypoint with its chunks injected                 | The third-party plugins that tap `html-webpack-plugin`'s hooks, which have no counterpart on [`HtmlModulesPlugin`](#plugin-hooks) yet |
+| [`title`, `meta`, `base`, `favicon`, `manifest`, `integrity`, `csp`, inlining](#configuring-the-generated-page)         |                                                                                                                                       |
+| [Minification](#minification) and Hot Module Replacement                                                                |                                                                                                                                       |
+
+So a project using `html-webpack-plugin` to scaffold a document around its bundles, or `html-loader` to import a partial, needs neither. A project that renders its page through a template engine, or depends on a plugin that hooks into `html-webpack-plugin`, keeps that plugin.
 
 T> Since webpack 5.109.0 the option defaults to `'auto'`: built-in HTML support turns on unless a [`module.rules`](/configuration/module/#modulerules) entry with a loader (or an explicit module type) already matches `.html` files. An existing `html-loader` setup therefore keeps working untouched, and you can migrate one rule at a time. [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults) resolves it to `true`.
 
@@ -335,7 +350,9 @@ export default {
 };
 ```
 
-Every icon — including the ones named inside the manifest — is emitted as a hashed asset through the normal pipeline, so `favicons-webpack-plugin` and friends are no longer needed. Both apply to webpack-generated pages only: an authored page is left exactly as written, so add the `<link>` tags to the page itself when you own its markup. Both options also accept a function receiving the page name, which is how you give each page of a multi-page build its own icon set.
+Every icon — including the ones named inside the manifest — is emitted as a hashed asset through the normal pipeline. Both options also accept a function receiving the page name, which is how you give each page of a multi-page build its own icon set.
+
+Two limits are worth knowing. Webpack emits the icons you point it at; it does not generate the size and format variants a dedicated plugin such as `favicons-webpack-plugin` produces from one source image. And both options apply to webpack-generated pages only — an authored page is left exactly as written, so add the `<link>` tags to the page yourself when you own its markup.
 
 ### Subresource Integrity and CSP
 
diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx
index a4a6a52f0af8..923b11747c32 100644
--- a/src/content/loaders/index.mdx
+++ b/src/content/loaders/index.mdx
@@ -38,9 +38,9 @@ Loaders are activated by using `loadername!` prefixes in `import .. from "mod";`
 
 ## Templating
 
-W> Webpack bundles HTML on its own — see [`experiments.html`](/configuration/experiments/#experimentshtml) and the [Native HTML](/guides/native-html/) guide, which also covers migrating off `html-loader`.
+T> Webpack has experimental built-in HTML support ([`experiments.html`](/configuration/experiments/#experimentshtml)): it parses `.html`, extracts the URLs a page references and bundles inline `<script>` / `<style>`, so importing a plain HTML partial needs no loader. Template engines still need theirs — [What's built-in](/guides/native-html/#whats-built-in) states the exact scope.
 
-- [`html-loader`](/loaders/html-loader) **Deprecated** — superseded by webpack's [built-in HTML support](/guides/native-html/). Exports HTML as string, require references to static resources
+- [`html-loader`](/loaders/html-loader) Exports HTML as string, require references to static resources. Webpack can [do this itself](/guides/native-html/#3-html-imported-from-javascript); still needed for `sources.scriptingEnabled` and `postprocessor`
 - [`pug-loader`](https://github.com/pugjs/pug-loader) Loads Pug and Jade templates and returns a function
 - [`markdown-loader`](https://github.com/peerigon/markdown-loader) Compiles Markdown to HTML
 - [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader) Compiles Markdown to a React Component using the markdown-parse parser
@@ -52,10 +52,10 @@ W> Webpack bundles HTML on its own — see [`experiments.html`](/configuration/e
 
 ## Styling
 
-W> Webpack parses, extracts and minifies CSS on its own — see [`experiments.css`](/configuration/experiments/#experimentscss) and the [Native CSS](/guides/native-css/) guide, which also covers migrating off the loaders marked below. Preprocessor loaders (Sass, Less, PostCSS, Stylus) stay: pair them with a `css/auto` rule.
+T> Webpack has experimental built-in CSS support ([`experiments.css`](/configuration/experiments/#experimentscss)): it parses `.css`, resolves `@import` and `url()`, handles CSS Modules, extracts or injects stylesheets and minifies them, so a setup using the CSS loaders with default options needs neither. It does **not** replace preprocessors, and a handful of loader options have no equivalent — [What's built-in](/guides/native-css/#whats-built-in) states the exact scope.
 
-- [`style-loader`](/loaders/style-loader) **Deprecated** — superseded by webpack's [built-in CSS support](/guides/native-css/). Add exports of a module as style to DOM
-- [`css-loader`](/loaders/css-loader) **Deprecated** — superseded by webpack's [built-in CSS support](/guides/native-css/). Loads CSS file with resolved imports and returns CSS code
+- [`style-loader`](/loaders/style-loader) Add exports of a module as style to DOM. Webpack can [inject styles itself](/guides/native-css/#output-modes-exporttype); still needed for `insert`, `attributes`, `styleTagTransform` and lazy / singleton injection
+- [`css-loader`](/loaders/css-loader) Loads CSS file with resolved imports and returns CSS code. Webpack can [parse CSS itself](/guides/native-css/); still needed for `importLoaders`, `localIdentRegExp`, `getJSON` and the `url` / `import` filter callbacks
 - [`css-utility-loader`](https://github.com/SahilKhanWDC/css-utility-loader-webpack-.git) - Automatically parses and translates legacy CSS properties into modern utility classes (Tailwind) at build-time.
 - [`less-loader`](/loaders/less-loader) Loads and compiles a LESS file
 - [`sass-loader`](/loaders/sass-loader) Loads and compiles a SASS/SCSS file
diff --git a/src/content/plugins/index.mdx b/src/content/plugins/index.mdx
index 61e438d05272..174b38dadb23 100644
--- a/src/content/plugins/index.mdx
+++ b/src/content/plugins/index.mdx
@@ -16,33 +16,33 @@ contributors:
 
 Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**.
 
-W> Webpack now bundles CSS and HTML itself, so the plugins marked **Deprecated** below are no longer needed — see the [Native CSS](/guides/native-css/) and [Native HTML](/guides/native-html/) guides for the built-in equivalents and how to migrate.
+T> Webpack has experimental built-in CSS and HTML support, so two of the plugins below have a built-in alternative for the common case. What each still covers that webpack does not is stated in [What's built-in](/guides/native-css/#whats-built-in) for CSS and [What's built-in](/guides/native-html/#whats-built-in) for HTML.
 
-| Name                                                                            | Description                                                                                                                                                                |
-| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`BannerPlugin`](/plugins/banner-plugin)                                        | Add a banner to the top of each generated chunk                                                                                                                            |
-| [`ChunksWebpackPlugin`](/plugins/chunks-webpack-plugin/)                        | Create HTML files with entrypoints and chunks relations to serve your bundles                                                                                              |
-| [`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)               | Prepare compressed versions of assets to serve them with Content-Encoding                                                                                                  |
-| [`ContextReplacementPlugin`](/plugins/context-replacement-plugin)               | Override the inferred context of a `require` expression                                                                                                                    |
-| [`CopyWebpackPlugin`](/plugins/copy-webpack-plugin)                             | Copies individual files or entire directories to the build directory                                                                                                       |
-| [`DefinePlugin`](/plugins/define-plugin)                                        | Allow global constants configured at compile time                                                                                                                          |
-| [`DllPlugin`](/plugins/dll-plugin)                                              | Split bundles in order to drastically improve build time                                                                                                                   |
-| [`EnvironmentPlugin`](/plugins/environment-plugin)                              | Shorthand for using the [`DefinePlugin`](/plugins/define-plugin) on `process.env` keys                                                                                     |
-| [`EslintWebpackPlugin`](/plugins/eslint-webpack-plugin)                         | A ESLint plugin for webpack                                                                                                                                                |
-| [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin)          | Enable Hot Module Replacement (HMR)                                                                                                                                        |
-| [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)                             | **Deprecated** — superseded by [`output.html`](/configuration/output/#outputhtml); see [Native HTML](/guides/native-html/). Easily create HTML files to serve your bundles |
-| [`IgnorePlugin`](/plugins/ignore-plugin)                                        | Exclude certain modules from bundles                                                                                                                                       |
-| [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin)                    | Set min/max limits for chunking to better control chunking                                                                                                                 |
-| [`MergeDuplicateChunksPlugin`](/plugins/merge-duplicate-chunks-plugin)          | Merge chunks that contain the same modules                                                                                                                                 |
-| [`MinChunkSizePlugin`](/plugins/min-chunk-size-plugin)                          | Keep chunk size above the specified limit                                                                                                                                  |
-| [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin)                      | **Deprecated** — superseded by webpack's [built-in CSS support](/guides/native-css/). Creates a CSS file per JS file which requires CSS                                    |
-| [`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimizationemitonerrors) | Skip the emitting phase when there are compilation errors                                                                                                                  |
-| [`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin)    | Replace resource(s) that matches a regexp                                                                                                                                  |
-| [`ProgressPlugin`](/plugins/progress-plugin)                                    | Report compilation progress                                                                                                                                                |
-| [`ProvidePlugin`](/plugins/provide-plugin)                                      | Use modules without having to use import/require                                                                                                                           |
-| [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin)                 | Enables a more fine grained control of source maps                                                                                                                         |
-| [`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin)        | Enables a more fine grained control of eval source maps                                                                                                                    |
-| [`SvgChunkWebpackPlugin`](/plugins/svg-chunk-webpack-plugin/)                   | Generate SVG sprites optimized by SVGO based on your entry point dependencies                                                                                              |
-| [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/)                         | Uses Terser (or other) to minify the JS/CSS/HTML/JSON/etc in your project                                                                                                  |
+| Name                                                                            | Description                                                                                                                              |
+| ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| [`BannerPlugin`](/plugins/banner-plugin)                                        | Add a banner to the top of each generated chunk                                                                                          |
+| [`ChunksWebpackPlugin`](/plugins/chunks-webpack-plugin/)                        | Create HTML files with entrypoints and chunks relations to serve your bundles                                                            |
+| [`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)               | Prepare compressed versions of assets to serve them with Content-Encoding                                                                |
+| [`ContextReplacementPlugin`](/plugins/context-replacement-plugin)               | Override the inferred context of a `require` expression                                                                                  |
+| [`CopyWebpackPlugin`](/plugins/copy-webpack-plugin)                             | Copies individual files or entire directories to the build directory                                                                     |
+| [`DefinePlugin`](/plugins/define-plugin)                                        | Allow global constants configured at compile time                                                                                        |
+| [`DllPlugin`](/plugins/dll-plugin)                                              | Split bundles in order to drastically improve build time                                                                                 |
+| [`EnvironmentPlugin`](/plugins/environment-plugin)                              | Shorthand for using the [`DefinePlugin`](/plugins/define-plugin) on `process.env` keys                                                   |
+| [`EslintWebpackPlugin`](/plugins/eslint-webpack-plugin)                         | A ESLint plugin for webpack                                                                                                              |
+| [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin)          | Enable Hot Module Replacement (HMR)                                                                                                      |
+| [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)                             | Easily create HTML files to serve your bundles. Built-in alternative: [`output.html`](/configuration/output/#outputhtml)                 |
+| [`IgnorePlugin`](/plugins/ignore-plugin)                                        | Exclude certain modules from bundles                                                                                                     |
+| [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin)                    | Set min/max limits for chunking to better control chunking                                                                               |
+| [`MergeDuplicateChunksPlugin`](/plugins/merge-duplicate-chunks-plugin)          | Merge chunks that contain the same modules                                                                                               |
+| [`MinChunkSizePlugin`](/plugins/min-chunk-size-plugin)                          | Keep chunk size above the specified limit                                                                                                |
+| [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin)                      | Creates a CSS file per JS file which requires CSS. Built-in alternative: [`experiments.css`](/configuration/experiments/#experimentscss) |
+| [`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimizationemitonerrors) | Skip the emitting phase when there are compilation errors                                                                                |
+| [`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin)    | Replace resource(s) that matches a regexp                                                                                                |
+| [`ProgressPlugin`](/plugins/progress-plugin)                                    | Report compilation progress                                                                                                              |
+| [`ProvidePlugin`](/plugins/provide-plugin)                                      | Use modules without having to use import/require                                                                                         |
+| [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin)                 | Enables a more fine grained control of source maps                                                                                       |
+| [`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin)        | Enables a more fine grained control of eval source maps                                                                                  |
+| [`SvgChunkWebpackPlugin`](/plugins/svg-chunk-webpack-plugin/)                   | Generate SVG sprites optimized by SVGO based on your entry point dependencies                                                            |
+| [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/)                         | Uses Terser (or other) to minify the JS/CSS/HTML/JSON/etc in your project                                                                |
 
 For more third-party plugins, see the list from [awesome-webpack](/awesome-webpack/#webpack-plugins).

From 0dc40c1b8118335abff0a35700a7992b9646a9dc Mon Sep 17 00:00:00 2001
From: alexander-akait <4567934+alexander-akait@users.noreply.github.com>
Date: Thu, 27 Aug 2026 17:40:40 +0000
Subject: [PATCH 2/6] docs: say what needs no loader, and keep the list entries
 short

A developer scanning the loaders list cannot tell which capabilities
webpack already has, so lead with the list of what needs no loader:
JavaScript, JSON, asset modules, WebAssembly, and the experimental CSS,
HTML and TypeScript support.

Shorten the entries added for the CSS and HTML loaders to a single
parenthetical, so the list reads as a list again; the scope of each
built-in stays in the guide it links to.
---
 src/content/loaders/index.mdx | 24 ++++++++++++----
 src/content/plugins/index.mdx | 54 +++++++++++++++++------------------
 2 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx
index 923b11747c32..d0505c7984b4 100644
--- a/src/content/loaders/index.mdx
+++ b/src/content/loaders/index.mdx
@@ -17,6 +17,20 @@ Webpack enables use of [loaders](/concepts/loaders) to preprocess files. This al
 Loaders are separate packages that extend webpack's capabilities and are maintained within the broader ecosystem.
 Loaders are activated by using `loadername!` prefixes in `import .. from "mod";`/`require()` statements, or are automatically applied via regex from your webpack configuration – see [configuration](/concepts/loaders/#configuration).
 
+## What needs no loader
+
+Webpack handles these itself — install a loader only for what is _not_ on this list:
+
+- **JavaScript**, ESM and CommonJS
+- **JSON**
+- **Images, fonts, media and text files** — [Asset Modules](/guides/asset-modules/), which replace `file-loader`, `url-loader` and `raw-loader`
+- **WebAssembly** — [`experiments.asyncWebAssembly`](/configuration/experiments/#experiments)
+- **CSS** — [`experiments.css`](/configuration/experiments/#experimentscss), experimental; see [what it covers](/guides/native-css/#whats-built-in)
+- **HTML** — [`experiments.html`](/configuration/experiments/#experimentshtml), experimental; see [what it covers](/guides/native-html/#whats-built-in)
+- **TypeScript** — [`experiments.typescript`](/configuration/experiments/#experimentstypescript), experimental; erases types on Node.js 22.6+, but does not type-check or handle JSX
+
+Everything below is for the rest: preprocessors, template engines and other languages.
+
 ## Files
 
 - [`ref-loader`](https://www.npmjs.com/package/ref-loader) Create dependencies between any files manually
@@ -38,9 +52,9 @@ Loaders are activated by using `loadername!` prefixes in `import .. from "mod";`
 
 ## Templating
 
-T> Webpack has experimental built-in HTML support ([`experiments.html`](/configuration/experiments/#experimentshtml)): it parses `.html`, extracts the URLs a page references and bundles inline `<script>` / `<style>`, so importing a plain HTML partial needs no loader. Template engines still need theirs — [What's built-in](/guides/native-html/#whats-built-in) states the exact scope.
+T> Webpack has experimental built-in HTML support ([`experiments.html`](/configuration/experiments/#experimentshtml)) that covers the common setup. Template engines still need their loader — see [What's built-in](/guides/native-html/#whats-built-in).
 
-- [`html-loader`](/loaders/html-loader) Exports HTML as string, require references to static resources. Webpack can [do this itself](/guides/native-html/#3-html-imported-from-javascript); still needed for `sources.scriptingEnabled` and `postprocessor`
+- [`html-loader`](/loaders/html-loader) Exports HTML as string, require references to static resources ([built-in alternative](/guides/native-html/#whats-built-in))
 - [`pug-loader`](https://github.com/pugjs/pug-loader) Loads Pug and Jade templates and returns a function
 - [`markdown-loader`](https://github.com/peerigon/markdown-loader) Compiles Markdown to HTML
 - [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader) Compiles Markdown to a React Component using the markdown-parse parser
@@ -52,10 +66,10 @@ T> Webpack has experimental built-in HTML support ([`experiments.html`](/configu
 
 ## Styling
 
-T> Webpack has experimental built-in CSS support ([`experiments.css`](/configuration/experiments/#experimentscss)): it parses `.css`, resolves `@import` and `url()`, handles CSS Modules, extracts or injects stylesheets and minifies them, so a setup using the CSS loaders with default options needs neither. It does **not** replace preprocessors, and a handful of loader options have no equivalent — [What's built-in](/guides/native-css/#whats-built-in) states the exact scope.
+T> Webpack has experimental built-in CSS support ([`experiments.css`](/configuration/experiments/#experimentscss)) that covers the common setup. It does not replace preprocessors, and a few loader options have no equivalent — see [What's built-in](/guides/native-css/#whats-built-in).
 
-- [`style-loader`](/loaders/style-loader) Add exports of a module as style to DOM. Webpack can [inject styles itself](/guides/native-css/#output-modes-exporttype); still needed for `insert`, `attributes`, `styleTagTransform` and lazy / singleton injection
-- [`css-loader`](/loaders/css-loader) Loads CSS file with resolved imports and returns CSS code. Webpack can [parse CSS itself](/guides/native-css/); still needed for `importLoaders`, `localIdentRegExp`, `getJSON` and the `url` / `import` filter callbacks
+- [`style-loader`](/loaders/style-loader) Add exports of a module as style to DOM ([built-in alternative](/guides/native-css/#whats-built-in))
+- [`css-loader`](/loaders/css-loader) Loads CSS file with resolved imports and returns CSS code ([built-in alternative](/guides/native-css/#whats-built-in))
 - [`css-utility-loader`](https://github.com/SahilKhanWDC/css-utility-loader-webpack-.git) - Automatically parses and translates legacy CSS properties into modern utility classes (Tailwind) at build-time.
 - [`less-loader`](/loaders/less-loader) Loads and compiles a LESS file
 - [`sass-loader`](/loaders/sass-loader) Loads and compiles a SASS/SCSS file
diff --git a/src/content/plugins/index.mdx b/src/content/plugins/index.mdx
index 174b38dadb23..5fcde04b90d8 100644
--- a/src/content/plugins/index.mdx
+++ b/src/content/plugins/index.mdx
@@ -16,33 +16,33 @@ contributors:
 
 Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**.
 
-T> Webpack has experimental built-in CSS and HTML support, so two of the plugins below have a built-in alternative for the common case. What each still covers that webpack does not is stated in [What's built-in](/guides/native-css/#whats-built-in) for CSS and [What's built-in](/guides/native-html/#whats-built-in) for HTML.
+T> Webpack has experimental built-in CSS and HTML support, so two plugins below have a built-in alternative for the common case — see what each still covers for [CSS](/guides/native-css/#whats-built-in) and [HTML](/guides/native-html/#whats-built-in).
 
-| Name                                                                            | Description                                                                                                                              |
-| ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| [`BannerPlugin`](/plugins/banner-plugin)                                        | Add a banner to the top of each generated chunk                                                                                          |
-| [`ChunksWebpackPlugin`](/plugins/chunks-webpack-plugin/)                        | Create HTML files with entrypoints and chunks relations to serve your bundles                                                            |
-| [`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)               | Prepare compressed versions of assets to serve them with Content-Encoding                                                                |
-| [`ContextReplacementPlugin`](/plugins/context-replacement-plugin)               | Override the inferred context of a `require` expression                                                                                  |
-| [`CopyWebpackPlugin`](/plugins/copy-webpack-plugin)                             | Copies individual files or entire directories to the build directory                                                                     |
-| [`DefinePlugin`](/plugins/define-plugin)                                        | Allow global constants configured at compile time                                                                                        |
-| [`DllPlugin`](/plugins/dll-plugin)                                              | Split bundles in order to drastically improve build time                                                                                 |
-| [`EnvironmentPlugin`](/plugins/environment-plugin)                              | Shorthand for using the [`DefinePlugin`](/plugins/define-plugin) on `process.env` keys                                                   |
-| [`EslintWebpackPlugin`](/plugins/eslint-webpack-plugin)                         | A ESLint plugin for webpack                                                                                                              |
-| [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin)          | Enable Hot Module Replacement (HMR)                                                                                                      |
-| [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)                             | Easily create HTML files to serve your bundles. Built-in alternative: [`output.html`](/configuration/output/#outputhtml)                 |
-| [`IgnorePlugin`](/plugins/ignore-plugin)                                        | Exclude certain modules from bundles                                                                                                     |
-| [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin)                    | Set min/max limits for chunking to better control chunking                                                                               |
-| [`MergeDuplicateChunksPlugin`](/plugins/merge-duplicate-chunks-plugin)          | Merge chunks that contain the same modules                                                                                               |
-| [`MinChunkSizePlugin`](/plugins/min-chunk-size-plugin)                          | Keep chunk size above the specified limit                                                                                                |
-| [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin)                      | Creates a CSS file per JS file which requires CSS. Built-in alternative: [`experiments.css`](/configuration/experiments/#experimentscss) |
-| [`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimizationemitonerrors) | Skip the emitting phase when there are compilation errors                                                                                |
-| [`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin)    | Replace resource(s) that matches a regexp                                                                                                |
-| [`ProgressPlugin`](/plugins/progress-plugin)                                    | Report compilation progress                                                                                                              |
-| [`ProvidePlugin`](/plugins/provide-plugin)                                      | Use modules without having to use import/require                                                                                         |
-| [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin)                 | Enables a more fine grained control of source maps                                                                                       |
-| [`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin)        | Enables a more fine grained control of eval source maps                                                                                  |
-| [`SvgChunkWebpackPlugin`](/plugins/svg-chunk-webpack-plugin/)                   | Generate SVG sprites optimized by SVGO based on your entry point dependencies                                                            |
-| [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/)                         | Uses Terser (or other) to minify the JS/CSS/HTML/JSON/etc in your project                                                                |
+| Name                                                                            | Description                                                                                                    |
+| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| [`BannerPlugin`](/plugins/banner-plugin)                                        | Add a banner to the top of each generated chunk                                                                |
+| [`ChunksWebpackPlugin`](/plugins/chunks-webpack-plugin/)                        | Create HTML files with entrypoints and chunks relations to serve your bundles                                  |
+| [`CompressionWebpackPlugin`](/plugins/compression-webpack-plugin)               | Prepare compressed versions of assets to serve them with Content-Encoding                                      |
+| [`ContextReplacementPlugin`](/plugins/context-replacement-plugin)               | Override the inferred context of a `require` expression                                                        |
+| [`CopyWebpackPlugin`](/plugins/copy-webpack-plugin)                             | Copies individual files or entire directories to the build directory                                           |
+| [`DefinePlugin`](/plugins/define-plugin)                                        | Allow global constants configured at compile time                                                              |
+| [`DllPlugin`](/plugins/dll-plugin)                                              | Split bundles in order to drastically improve build time                                                       |
+| [`EnvironmentPlugin`](/plugins/environment-plugin)                              | Shorthand for using the [`DefinePlugin`](/plugins/define-plugin) on `process.env` keys                         |
+| [`EslintWebpackPlugin`](/plugins/eslint-webpack-plugin)                         | A ESLint plugin for webpack                                                                                    |
+| [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin)          | Enable Hot Module Replacement (HMR)                                                                            |
+| [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)                             | Easily create HTML files to serve your bundles ([built-in alternative](/guides/native-html/#whats-built-in))   |
+| [`IgnorePlugin`](/plugins/ignore-plugin)                                        | Exclude certain modules from bundles                                                                           |
+| [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin)                    | Set min/max limits for chunking to better control chunking                                                     |
+| [`MergeDuplicateChunksPlugin`](/plugins/merge-duplicate-chunks-plugin)          | Merge chunks that contain the same modules                                                                     |
+| [`MinChunkSizePlugin`](/plugins/min-chunk-size-plugin)                          | Keep chunk size above the specified limit                                                                      |
+| [`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin)                      | Creates a CSS file per JS file which requires CSS ([built-in alternative](/guides/native-css/#whats-built-in)) |
+| [`NoEmitOnErrorsPlugin`](/configuration/optimization/#optimizationemitonerrors) | Skip the emitting phase when there are compilation errors                                                      |
+| [`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin)    | Replace resource(s) that matches a regexp                                                                      |
+| [`ProgressPlugin`](/plugins/progress-plugin)                                    | Report compilation progress                                                                                    |
+| [`ProvidePlugin`](/plugins/provide-plugin)                                      | Use modules without having to use import/require                                                               |
+| [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin)                 | Enables a more fine grained control of source maps                                                             |
+| [`EvalSourceMapDevToolPlugin`](/plugins/eval-source-map-dev-tool-plugin)        | Enables a more fine grained control of eval source maps                                                        |
+| [`SvgChunkWebpackPlugin`](/plugins/svg-chunk-webpack-plugin/)                   | Generate SVG sprites optimized by SVGO based on your entry point dependencies                                  |
+| [`MinimizerPlugin`](/plugins/minimizer-webpack-plugin/)                         | Uses Terser (or other) to minify the JS/CSS/HTML/JSON/etc in your project                                      |
 
 For more third-party plugins, see the list from [awesome-webpack](/awesome-webpack/#webpack-plugins).

From ca66791469f56fe5dc215e30d6cecc1fa11cdc22 Mon Sep 17 00:00:00 2001
From: alexander-akait <4567934+alexander-akait@users.noreply.github.com>
Date: Thu, 27 Aug 2026 17:42:59 +0000
Subject: [PATCH 3/6] docs: lead the loaders page with what needs no loader

Move the list above the introduction so it is the first thing on the
page, and fold the closing line into the prose that follows it.
---
 src/content/loaders/index.mdx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx
index d0505c7984b4..e1fad406b7d2 100644
--- a/src/content/loaders/index.mdx
+++ b/src/content/loaders/index.mdx
@@ -13,10 +13,6 @@ contributors:
   - chenxsan
 ---
 
-Webpack enables use of [loaders](/concepts/loaders) to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.
-Loaders are separate packages that extend webpack's capabilities and are maintained within the broader ecosystem.
-Loaders are activated by using `loadername!` prefixes in `import .. from "mod";`/`require()` statements, or are automatically applied via regex from your webpack configuration – see [configuration](/concepts/loaders/#configuration).
-
 ## What needs no loader
 
 Webpack handles these itself — install a loader only for what is _not_ on this list:
@@ -29,7 +25,9 @@ Webpack handles these itself — install a loader only for what is _not_ on this
 - **HTML** — [`experiments.html`](/configuration/experiments/#experimentshtml), experimental; see [what it covers](/guides/native-html/#whats-built-in)
 - **TypeScript** — [`experiments.typescript`](/configuration/experiments/#experimentstypescript), experimental; erases types on Node.js 22.6+, but does not type-check or handle JSX
 
-Everything below is for the rest: preprocessors, template engines and other languages.
+Webpack enables use of [loaders](/concepts/loaders) to preprocess everything else. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.
+Loaders are separate packages that extend webpack's capabilities and are maintained within the broader ecosystem.
+Loaders are activated by using `loadername!` prefixes in `import .. from "mod";`/`require()` statements, or are automatically applied via regex from your webpack configuration – see [configuration](/concepts/loaders/#configuration).
 
 ## Files
 

From 50751f364d928cd2f14d619e3d6dc4e627f58d84 Mon Sep 17 00:00:00 2001
From: alexander-akait <4567934+alexander-akait@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:36:35 +0000
Subject: [PATCH 4/6] docs: replace html-webpack-plugin with output.html in the
 guides

Eight pages now generate their page with output.html instead of the
plugin: the development, HMR, production, PWA and modern web platform
guides, the two concepts pages that used the plugin only as an example of
what a plugin is, and the CoffeeScript configuration sample. Each keeps
its title through output.html.title and pins the page name with
output.htmlFilename, since the default derives it from output.filename.

Output management and caching keep the plugin, with a note saying why:
output.html re-enters the entry's script under an internal chunk name and
leaves the named entry chunk holding the page, so a guide whose subject is
bundle filenames would be teaching the wrong thing.
---
 src/content/concepts/index.mdx                |  5 +--
 src/content/concepts/plugins.mdx              |  8 +---
 .../configuration/configuration-languages.mdx |  3 +-
 src/content/guides/caching.mdx                |  2 +
 src/content/guides/development.mdx            | 45 +++++++------------
 src/content/guides/hot-module-replacement.mdx | 32 +++++--------
 src/content/guides/modern-web-platform.mdx    |  6 ++-
 src/content/guides/output-management.mdx      |  2 +
 src/content/guides/production.mdx             | 14 +++---
 .../guides/progressive-web-application.mdx    | 10 ++---
 10 files changed, 54 insertions(+), 73 deletions(-)

diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx
index 6657460d2e15..7c8406903dba 100644
--- a/src/content/concepts/index.mdx
+++ b/src/content/concepts/index.mdx
@@ -138,18 +138,17 @@ In order to use a plugin, you need to `import` it and add it to the `plugins` ar
 **webpack.config.js**
 
 ```js
-import HtmlWebpackPlugin from "html-webpack-plugin";
 import webpack from "webpack"; // to access built-in plugins
 
 export default {
   module: {
     rules: [{ test: /\.js$/, use: "babel-loader" }],
   },
-  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
+  plugins: [new webpack.BannerPlugin({ banner: "hello world" })],
 };
 ```
 
-In the example above, the `html-webpack-plugin` generates an HTML file for your application and automatically injects all your generated bundles into this file.
+In the example above, the `BannerPlugin` adds a comment to the top of each generated chunk.
 
 T> There are many plugins that webpack provides out of the box! Check out the [list of plugins](/plugins).
 
diff --git a/src/content/concepts/plugins.mdx b/src/content/concepts/plugins.mdx
index 1df8c6c7b218..032fa2008132 100644
--- a/src/content/concepts/plugins.mdx
+++ b/src/content/concepts/plugins.mdx
@@ -52,7 +52,6 @@ Depending on how you are using webpack, there are multiple ways to use plugins.
 ```js
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import HtmlWebpackPlugin from "html-webpack-plugin";
 import webpack from "webpack"; // to access built-in plugins
 
 const __filename = fileURLToPath(import.meta.url);
@@ -72,14 +71,11 @@ export default {
       },
     ],
   },
-  plugins: [
-    new webpack.ProgressPlugin(),
-    new HtmlWebpackPlugin({ template: "./src/index.html" }),
-  ],
+  plugins: [new webpack.ProgressPlugin()],
 };
 ```
 
-The `ProgressPlugin` is used to customize how progress should be reported during compilation, and `HtmlWebpackPlugin` will generate a HTML file including the `my-first-webpack.bundle.js` file using a `script` tag.
+The `ProgressPlugin` is used to customize how progress should be reported during compilation. To generate an HTML file that loads `my-first-webpack.bundle.js`, set [`output.html`](/configuration/output/#outputhtml) — see [Native HTML](/guides/native-html/).
 
 ### Node API
 
diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx
index d43678e99775..51b21149867d 100644
--- a/src/content/configuration/configuration-languages.mdx
+++ b/src/content/configuration/configuration-languages.mdx
@@ -186,7 +186,6 @@ and then proceed to write your configuration:
 ```coffeescript
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
 import webpack from 'webpack'
 
 __filename = fileURLToPath(import.meta.url)
@@ -206,7 +205,7 @@ config =
       }
     ]
   plugins: [
-    new HtmlWebpackPlugin(template: './src/index.html')
+    new webpack.ProgressPlugin()
   ]
 
 export default config
diff --git a/src/content/guides/caching.mdx b/src/content/guides/caching.mdx
index dc23e2f68576..d64ac6dac844 100644
--- a/src/content/guides/caching.mdx
+++ b/src/content/guides/caching.mdx
@@ -31,6 +31,8 @@ We can use the `output.filename` [substitutions](/configuration/output/#outputfi
 
 Let's get our project set up using the example from [getting started](/guides/getting-started) with the `plugins` from [output management](/guides/output-management), so we don't have to deal with maintaining our `index.html` file manually:
 
+T> Webpack can generate the page itself with [`output.html`](/configuration/output/#outputhtml) — see [Native HTML](/guides/native-html/). This guide keeps `HtmlWebpackPlugin` because the generated page re-enters the entry's script under an internal chunk name, which would obscure the bundle filenames this guide is about.
+
 **project**
 
 ```diff
diff --git a/src/content/guides/development.mdx b/src/content/guides/development.mdx
index 5a949c145a29..b07334fffead 100644
--- a/src/content/guides/development.mdx
+++ b/src/content/guides/development.mdx
@@ -33,7 +33,6 @@ Let's start by setting [`mode` to `'development'`](/configuration/mode/#mode-dev
 ```diff
  import path from 'node:path';
  import { fileURLToPath } from 'node:url';
- import HtmlWebpackPlugin from 'html-webpack-plugin';
 
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
@@ -44,16 +43,15 @@ Let's start by setting [`mode` to `'development'`](/configuration/mode/#mode-dev
      index: './src/index.js',
      print: './src/print.js',
    },
-   plugins: [
-     new HtmlWebpackPlugin({
--      title: 'Output Management',
-+      title: 'Development',
-     }),
-   ],
    output: {
      filename: '[name].bundle.js',
+     htmlFilename: '[name].html',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
+     html: {
+-      title: 'Output Management',
++      title: 'Development',
+     },
    },
  };
 ```
@@ -73,7 +71,6 @@ For this guide, let's use the `inline-source-map` option, which is good for illu
 ```diff
  import path from 'node:path';
  import { fileURLToPath } from 'node:url';
- import HtmlWebpackPlugin from 'html-webpack-plugin';
 
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
@@ -85,15 +82,14 @@ For this guide, let's use the `inline-source-map` option, which is good for illu
      print: './src/print.js',
    },
 +  devtool: 'inline-source-map',
-   plugins: [
-     new HtmlWebpackPlugin({
-       title: 'Development',
-     }),
-   ],
    output: {
      filename: '[name].bundle.js',
+     htmlFilename: '[name].html',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
+     html: {
+       title: 'Development',
+     },
    },
  };
 ```
@@ -171,7 +167,6 @@ Let's add an npm script that will start webpack's Watch Mode:
    "author": "",
    "license": "ISC",
    "devDependencies": {
-     "html-webpack-plugin": "^5.6.6",
      "webpack": "^5.105.0",
      "webpack-cli": "^7.0.0"
    },
@@ -214,7 +209,6 @@ Change your configuration file to tell the dev server where to look for files:
 ```diff
  import path from 'node:path';
  import { fileURLToPath } from 'node:url';
- import HtmlWebpackPlugin from 'html-webpack-plugin';
 
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
@@ -229,15 +223,14 @@ Change your configuration file to tell the dev server where to look for files:
 +  devServer: {
 +    static: './dist',
 +  },
-   plugins: [
-     new HtmlWebpackPlugin({
-       title: 'Development',
-     }),
-   ],
    output: {
      filename: '[name].bundle.js',
+     htmlFilename: '[name].html',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
+     html: {
+       title: 'Development',
+     },
    },
 +  optimization: {
 +    runtimeChunk: 'single',
@@ -273,7 +266,6 @@ Let's add a script to easily run the dev server as well:
    "author": "",
    "license": "ISC",
    "devDependencies": {
-     "html-webpack-plugin": "^5.6.6",
      "webpack": "^5.105.0",
      "webpack-cli": "^7.0.0",
      "webpack-dev-server": "^5.2.3"
@@ -307,7 +299,6 @@ Now we need to make some adjustments to our webpack configuration file in order
 ```diff
  import path from 'node:path';
  import { fileURLToPath } from 'node:url';
- import HtmlWebpackPlugin from 'html-webpack-plugin';
 
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
@@ -322,15 +313,14 @@ Now we need to make some adjustments to our webpack configuration file in order
    devServer: {
      static: './dist',
    },
-   plugins: [
-     new HtmlWebpackPlugin({
-       title: 'Development',
-     }),
-   ],
    output: {
      filename: '[name].bundle.js',
+     htmlFilename: '[name].html',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
+     html: {
+       title: 'Development',
+     },
 +    publicPath: '/',
    },
  };
@@ -400,7 +390,6 @@ Now add an npm script to make it a little easier to run the server:
    "license": "ISC",
    "devDependencies": {
      "express": "^5.2.1",
-     "html-webpack-plugin": "^5.6.6",
      "webpack": "^5.105.0",
      "webpack-cli": "^7.0.0",
      "webpack-dev-middleware": "^8.0.3",
diff --git a/src/content/guides/hot-module-replacement.mdx b/src/content/guides/hot-module-replacement.mdx
index 0db246e82d23..d128198d3bcc 100644
--- a/src/content/guides/hot-module-replacement.mdx
+++ b/src/content/guides/hot-module-replacement.mdx
@@ -49,7 +49,6 @@ T> If you took the route of using `webpack-dev-middleware` instead of `webpack-d
 ```diff
   import path from 'node:path';
   import { fileURLToPath } from 'node:url';
-  import HtmlWebpackPlugin from 'html-webpack-plugin';
 
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
@@ -64,15 +63,14 @@ T> If you took the route of using `webpack-dev-middleware` instead of `webpack-d
       static: './dist',
 +     hot: true,
     },
-    plugins: [
-      new HtmlWebpackPlugin({
-        title: 'Hot Module Replacement',
-      }),
-    ],
     output: {
       filename: '[name].bundle.js',
+      htmlFilename: '[name].html',
       path: path.resolve(__dirname, 'dist'),
       clean: true,
+      html: {
+        title: 'Hot Module Replacement',
+      },
     },
   };
 ```
@@ -84,7 +82,6 @@ you can also provide manual entry points for HMR:
 ```diff
   import path from 'node:path';
   import { fileURLToPath } from 'node:url';
-  import HtmlWebpackPlugin from 'html-webpack-plugin';
 + import webpack from 'webpack';
 
   const __filename = fileURLToPath(import.meta.url);
@@ -107,16 +104,17 @@ you can also provide manual entry points for HMR:
 +     client: false,
     },
     plugins: [
-      new HtmlWebpackPlugin({
-        title: 'Hot Module Replacement',
-      }),
 +     // Plugin for hot module replacement
 +     new webpack.HotModuleReplacementPlugin(),
     ],
     output: {
       filename: '[name].bundle.js',
+      htmlFilename: '[name].html',
       path: path.resolve(__dirname, 'dist'),
       clean: true,
+      html: {
+        title: 'Hot Module Replacement',
+      },
     },
   };
 ```
@@ -193,7 +191,6 @@ To enable HMR, you also need to modify your webpack configuration object to incl
 ```js
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import HtmlWebpackPlugin from "html-webpack-plugin";
 import webpack from "webpack";
 import WebpackDevServer from "webpack-dev-server";
 
@@ -214,14 +211,14 @@ const config = {
   plugins: [
     // Plugin for hot module replacement
     new webpack.HotModuleReplacementPlugin(),
-    new HtmlWebpackPlugin({
-      title: "Hot Module Replacement",
-    }),
   ],
   output: {
     filename: "[name].bundle.js",
     path: path.resolve(__dirname, "dist"),
     clean: true,
+    html: {
+      title: "Hot Module Replacement",
+    },
   },
 };
 const compiler = webpack(config);
@@ -303,7 +300,6 @@ Now let's update the configuration file to make use of the loader.
 ```diff
   import path from 'node:path';
   import { fileURLToPath } from 'node:url';
-  import HtmlWebpackPlugin from 'html-webpack-plugin';
 
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
@@ -325,13 +321,9 @@ Now let's update the configuration file to make use of the loader.
 +       },
 +     ],
 +   },
-    plugins: [
-      new HtmlWebpackPlugin({
-        title: 'Hot Module Replacement',
-      }),
-    ],
     output: {
       filename: '[name].bundle.js',
+      htmlFilename: '[name].html',
       path: path.resolve(__dirname, 'dist'),
       clean: true,
     },
diff --git a/src/content/guides/modern-web-platform.mdx b/src/content/guides/modern-web-platform.mdx
index ba31c73fab32..c8a2d2fcff3e 100644
--- a/src/content/guides/modern-web-platform.mdx
+++ b/src/content/guides/modern-web-platform.mdx
@@ -160,7 +160,6 @@ npm install workbox-webpack-plugin workbox-precaching --save-dev
 ```js
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import HtmlWebpackPlugin from "html-webpack-plugin";
 import { InjectManifest } from "workbox-webpack-plugin";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -168,13 +167,16 @@ const __dirname = path.dirname(__filename);
 
 export default {
   entry: "./src/index.js",
+  experiments: {
+    html: true,
+  },
   output: {
     filename: "[name].[contenthash].js",
     path: path.resolve(__dirname, "dist"),
     clean: true,
+    html: { title: "PWA + content hashes" },
   },
   plugins: [
-    new HtmlWebpackPlugin({ title: "PWA + content hashes" }),
     new InjectManifest({
       swSrc: path.resolve(__dirname, "src/service-worker.js"),
       swDest: "service-worker.js",
diff --git a/src/content/guides/output-management.mdx b/src/content/guides/output-management.mdx
index 84b48ff7d73e..6384f2de787f 100644
--- a/src/content/guides/output-management.mdx
+++ b/src/content/guides/output-management.mdx
@@ -141,6 +141,8 @@ Multiple entry points are used here solely to demonstrate output management and
 
 ## Setting up HtmlWebpackPlugin
 
+T> Webpack can generate the page itself with [`output.html`](/configuration/output/#outputhtml) — see [Native HTML](/guides/native-html/). This guide keeps `HtmlWebpackPlugin` because the generated page re-enters the entry's script under an internal chunk name, which would obscure the bundle filenames this guide is about.
+
 First install the plugin and adjust the `webpack.config.js` file:
 
 ```bash
diff --git a/src/content/guides/production.mdx b/src/content/guides/production.mdx
index 4b3c4f379b4c..7e17bbbae8d8 100644
--- a/src/content/guides/production.mdx
+++ b/src/content/guides/production.mdx
@@ -65,7 +65,6 @@ npm install --save-dev webpack-merge
 ```diff
 + import path from 'node:path';
 + import { fileURLToPath } from 'node:url';
-+ import HtmlWebpackPlugin from 'html-webpack-plugin';
 +
 + const __filename = fileURLToPath(import.meta.url);
 + const __dirname = path.dirname(__filename);
@@ -74,15 +73,17 @@ npm install --save-dev webpack-merge
 +   entry: {
 +     app: './src/index.js',
 +   },
-+   plugins: [
-+     new HtmlWebpackPlugin({
-+       title: 'Production',
-+     }),
-+   ],
++   experiments: {
++     html: true,
++   },
 +   output: {
 +     filename: '[name].bundle.js',
++     htmlFilename: '[name].html',
 +     path: path.resolve(__dirname, 'dist'),
 +     clean: true,
++     html: {
++       title: 'Production',
++     },
 +   },
 + };
 ```
@@ -142,7 +143,6 @@ Now, let's modify our npm scripts to use the new configuration files. For the `s
       "css-loader": "^7.1.3",
       "csv-loader": "^3.0.5",
       "express": "^5.2.1",
-      "html-webpack-plugin": "^5.6.6",
       "style-loader": "^4.0.0",
       "webpack": "^5.105.0",
       "webpack-cli": "^7.0.0",
diff --git a/src/content/guides/progressive-web-application.mdx b/src/content/guides/progressive-web-application.mdx
index 29b52a2b5f62..6898fe504c0e 100644
--- a/src/content/guides/progressive-web-application.mdx
+++ b/src/content/guides/progressive-web-application.mdx
@@ -67,7 +67,6 @@ npm install workbox-webpack-plugin --save-dev
 ```diff
   import path from "node:path";
   import { fileURLToPath } from 'node:url';
-  import HtmlWebpackPlugin from "html-webpack-plugin";
 + import WorkboxPlugin from "workbox-webpack-plugin";
 
  const __filename = fileURLToPath(import.meta.url);
@@ -79,10 +78,6 @@ npm install workbox-webpack-plugin --save-dev
       print: './src/print.js',
     },
     plugins: [
-      new HtmlWebpackPlugin({
--       title: 'Output Management',
-+       title: 'Progressive Web Application',
-      }),
 +     new WorkboxPlugin.GenerateSW({
 +       // these options encourage the ServiceWorkers to get in there fast
 +       // and not allow any straggling "old" SWs to hang around
@@ -92,8 +87,13 @@ npm install workbox-webpack-plugin --save-dev
     ],
     output: {
       filename: '[name].bundle.js',
+      htmlFilename: '[name].html',
       path: path.resolve(__dirname, 'dist'),
       clean: true,
+      html: {
+-       title: 'Output Management',
++       title: 'Progressive Web Application',
+      },
     },
   };
 ```

From 57d6e6538a5752a6b76e5789f6e21f20f75dac34 Mon Sep 17 00:00:00 2001
From: alexander-akait <4567934+alexander-akait@users.noreply.github.com>
Date: Fri, 28 Aug 2026 14:50:51 +0000
Subject: [PATCH 5/6] docs: enable html where html-webpack-plugin was replaced
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dropping the plugin is only half the change: the configuration has to keep
generating the page. Three examples lost HTML generation entirely when the
plugin was removed — the two concepts pages and the CoffeeScript config —
and the guides that did set output.html leaned on the 'auto' default
instead of saying so.

Every one of them now enables experiments.html and sets output.html, so
each configuration does what it did with the plugin.
---
 src/content/concepts/index.mdx                       | 10 ++++++++--
 src/content/concepts/plugins.mdx                     |  6 +++++-
 .../configuration/configuration-languages.mdx        |  3 +++
 src/content/guides/development.mdx                   | 12 ++++++++++++
 src/content/guides/hot-module-replacement.mdx        |  9 +++++++++
 src/content/guides/progressive-web-application.mdx   |  3 +++
 6 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx
index 7c8406903dba..11e9f7fc364e 100644
--- a/src/content/concepts/index.mdx
+++ b/src/content/concepts/index.mdx
@@ -144,11 +144,17 @@ export default {
   module: {
     rules: [{ test: /\.js$/, use: "babel-loader" }],
   },
-  plugins: [new webpack.BannerPlugin({ banner: "hello world" })],
+  plugins: [new webpack.ProgressPlugin()],
+  experiments: {
+    html: true,
+  },
+  output: {
+    html: true,
+  },
 };
 ```
 
-In the example above, the `BannerPlugin` adds a comment to the top of each generated chunk.
+In the example above, the `ProgressPlugin` customizes how build progress is reported, and [`output.html`](/configuration/output/#outputhtml) generates an HTML file for your application with all your generated bundles injected into it — webpack does that itself, so no plugin is needed for it.
 
 T> There are many plugins that webpack provides out of the box! Check out the [list of plugins](/plugins).
 
diff --git a/src/content/concepts/plugins.mdx b/src/content/concepts/plugins.mdx
index 032fa2008132..4050e0cde038 100644
--- a/src/content/concepts/plugins.mdx
+++ b/src/content/concepts/plugins.mdx
@@ -59,9 +59,13 @@ const __dirname = path.dirname(__filename);
 
 export default {
   entry: "./path/to/my/entry/file.js",
+  experiments: {
+    html: true,
+  },
   output: {
     filename: "my-first-webpack.bundle.js",
     path: path.resolve(__dirname, "dist"),
+    html: true,
   },
   module: {
     rules: [
@@ -75,7 +79,7 @@ export default {
 };
 ```
 
-The `ProgressPlugin` is used to customize how progress should be reported during compilation. To generate an HTML file that loads `my-first-webpack.bundle.js`, set [`output.html`](/configuration/output/#outputhtml) — see [Native HTML](/guides/native-html/).
+The `ProgressPlugin` is used to customize how progress should be reported during compilation, and [`output.html`](/configuration/output/#outputhtml) generates an HTML file including the `my-first-webpack.bundle.js` file using a `script` tag — see [Native HTML](/guides/native-html/).
 
 ### Node API
 
diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx
index 51b21149867d..8a4e9913be3b 100644
--- a/src/content/configuration/configuration-languages.mdx
+++ b/src/content/configuration/configuration-languages.mdx
@@ -194,9 +194,12 @@ __dirname = path.dirname(__filename)
 config =
   mode: 'production'
   entry: './path/to/my/entry/file.js'
+  experiments:
+    html: true
   output:
     path: path.resolve(__dirname, 'dist')
     filename: 'my-first-webpack.bundle.js'
+    html: true
   module:
     rules: [
       {
diff --git a/src/content/guides/development.mdx b/src/content/guides/development.mdx
index b07334fffead..f3001e0dd67d 100644
--- a/src/content/guides/development.mdx
+++ b/src/content/guides/development.mdx
@@ -43,6 +43,9 @@ Let's start by setting [`mode` to `'development'`](/configuration/mode/#mode-dev
      index: './src/index.js',
      print: './src/print.js',
    },
+   experiments: {
+     html: true,
+   },
    output: {
      filename: '[name].bundle.js',
      htmlFilename: '[name].html',
@@ -82,6 +85,9 @@ For this guide, let's use the `inline-source-map` option, which is good for illu
      print: './src/print.js',
    },
 +  devtool: 'inline-source-map',
+   experiments: {
+     html: true,
+   },
    output: {
      filename: '[name].bundle.js',
      htmlFilename: '[name].html',
@@ -223,6 +229,9 @@ Change your configuration file to tell the dev server where to look for files:
 +  devServer: {
 +    static: './dist',
 +  },
+   experiments: {
+     html: true,
+   },
    output: {
      filename: '[name].bundle.js',
      htmlFilename: '[name].html',
@@ -313,6 +322,9 @@ Now we need to make some adjustments to our webpack configuration file in order
    devServer: {
      static: './dist',
    },
+   experiments: {
+     html: true,
+   },
    output: {
      filename: '[name].bundle.js',
      htmlFilename: '[name].html',
diff --git a/src/content/guides/hot-module-replacement.mdx b/src/content/guides/hot-module-replacement.mdx
index d128198d3bcc..209bfb0f56d3 100644
--- a/src/content/guides/hot-module-replacement.mdx
+++ b/src/content/guides/hot-module-replacement.mdx
@@ -63,6 +63,9 @@ T> If you took the route of using `webpack-dev-middleware` instead of `webpack-d
       static: './dist',
 +     hot: true,
     },
+    experiments: {
+      html: true,
+    },
     output: {
       filename: '[name].bundle.js',
       htmlFilename: '[name].html',
@@ -107,6 +110,9 @@ you can also provide manual entry points for HMR:
 +     // Plugin for hot module replacement
 +     new webpack.HotModuleReplacementPlugin(),
     ],
+    experiments: {
+      html: true,
+    },
     output: {
       filename: '[name].bundle.js',
       htmlFilename: '[name].html',
@@ -212,6 +218,9 @@ const config = {
     // Plugin for hot module replacement
     new webpack.HotModuleReplacementPlugin(),
   ],
+  experiments: {
+    html: true,
+  },
   output: {
     filename: "[name].bundle.js",
     path: path.resolve(__dirname, "dist"),
diff --git a/src/content/guides/progressive-web-application.mdx b/src/content/guides/progressive-web-application.mdx
index 6898fe504c0e..f5928e1cb2af 100644
--- a/src/content/guides/progressive-web-application.mdx
+++ b/src/content/guides/progressive-web-application.mdx
@@ -85,6 +85,9 @@ npm install workbox-webpack-plugin --save-dev
 +       skipWaiting: true,
 +     }),
     ],
+    experiments: {
+      html: true,
+    },
     output: {
       filename: '[name].bundle.js',
       htmlFilename: '[name].html',

From 42133f94c9483222f7251b6ba8fd2f8bcb770f9b Mon Sep 17 00:00:00 2001
From: alexander-akait <4567934+alexander-akait@users.noreply.github.com>
Date: Fri, 28 Aug 2026 15:28:34 +0000
Subject: [PATCH 6/6] docs: only convert the examples whose output output.html
 reproduces
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Built each converted config both ways and compared the emitted files, which
turned up four mismatches:

- The three examples that passed `template` to the plugin were converted to
  output.html, which generates a bare document and threw the template's lang,
  charset, title and body away. They now use an HTML entry point, which keeps
  the authored page and rewrites its script URL.
- The generated page carried no charset or viewport, which the plugin emits by
  default; output.html.meta now supplies both.
- production emitted app.html and modern web platform emitted a page whose name
  carried the contenthash, because both derive from output.filename. Both now
  pin output.htmlFilename to index.html.
- The multi-entry guides — development, HMR and PWA — emit one page per
  entrypoint instead of the single page the plugin builds, six files where
  there were three, and development prints that file list in six places. They
  keep the plugin, with the same note output management and caching carry.
---
 src/content/concepts/index.mdx                | 12 ++--
 src/content/concepts/plugins.mdx              |  5 +-
 .../configuration/configuration-languages.mdx |  3 +-
 src/content/guides/development.mdx            | 59 ++++++++++---------
 src/content/guides/hot-module-replacement.mdx | 43 +++++++-------
 src/content/guides/modern-web-platform.mdx    |  9 ++-
 src/content/guides/production.mdx             |  6 +-
 .../guides/progressive-web-application.mdx    | 15 +++--
 8 files changed, 80 insertions(+), 72 deletions(-)

diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx
index 11e9f7fc364e..7ab7f8c465f8 100644
--- a/src/content/concepts/index.mdx
+++ b/src/content/concepts/index.mdx
@@ -141,20 +141,18 @@ In order to use a plugin, you need to `import` it and add it to the `plugins` ar
 import webpack from "webpack"; // to access built-in plugins
 
 export default {
-  module: {
-    rules: [{ test: /\.js$/, use: "babel-loader" }],
-  },
-  plugins: [new webpack.ProgressPlugin()],
+  entry: "./src/index.html",
   experiments: {
     html: true,
   },
-  output: {
-    html: true,
+  module: {
+    rules: [{ test: /\.js$/, use: "babel-loader" }],
   },
+  plugins: [new webpack.ProgressPlugin()],
 };
 ```
 
-In the example above, the `ProgressPlugin` customizes how build progress is reported, and [`output.html`](/configuration/output/#outputhtml) generates an HTML file for your application with all your generated bundles injected into it — webpack does that itself, so no plugin is needed for it.
+In the example above, the `ProgressPlugin` customizes how build progress is reported. Your `src/index.html` is the entry: webpack bundles the scripts and styles it references and rewrites those URLs to the built filenames, so no plugin is needed to produce the page — see [Native HTML](/guides/native-html/).
 
 T> There are many plugins that webpack provides out of the box! Check out the [list of plugins](/plugins).
 
diff --git a/src/content/concepts/plugins.mdx b/src/content/concepts/plugins.mdx
index 4050e0cde038..b163bc68dfcc 100644
--- a/src/content/concepts/plugins.mdx
+++ b/src/content/concepts/plugins.mdx
@@ -58,14 +58,13 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 export default {
-  entry: "./path/to/my/entry/file.js",
+  entry: "./src/index.html",
   experiments: {
     html: true,
   },
   output: {
     filename: "my-first-webpack.bundle.js",
     path: path.resolve(__dirname, "dist"),
-    html: true,
   },
   module: {
     rules: [
@@ -79,7 +78,7 @@ export default {
 };
 ```
 
-The `ProgressPlugin` is used to customize how progress should be reported during compilation, and [`output.html`](/configuration/output/#outputhtml) generates an HTML file including the `my-first-webpack.bundle.js` file using a `script` tag — see [Native HTML](/guides/native-html/).
+The `ProgressPlugin` is used to customize how progress should be reported during compilation. `src/index.html` is the entry, so webpack emits it as the page with the `<script src>` it references rewritten to the built chunk — no plugin is needed for that, see [Native HTML](/guides/native-html/).
 
 ### Node API
 
diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx
index 8a4e9913be3b..02bbbfb115dc 100644
--- a/src/content/configuration/configuration-languages.mdx
+++ b/src/content/configuration/configuration-languages.mdx
@@ -193,13 +193,12 @@ __dirname = path.dirname(__filename)
 
 config =
   mode: 'production'
-  entry: './path/to/my/entry/file.js'
+  entry: './src/index.html'
   experiments:
     html: true
   output:
     path: path.resolve(__dirname, 'dist')
     filename: 'my-first-webpack.bundle.js'
-    html: true
   module:
     rules: [
       {
diff --git a/src/content/guides/development.mdx b/src/content/guides/development.mdx
index f3001e0dd67d..e67357b979fe 100644
--- a/src/content/guides/development.mdx
+++ b/src/content/guides/development.mdx
@@ -33,6 +33,7 @@ Let's start by setting [`mode` to `'development'`](/configuration/mode/#mode-dev
 ```diff
  import path from 'node:path';
  import { fileURLToPath } from 'node:url';
+ import HtmlWebpackPlugin from 'html-webpack-plugin';
 
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
@@ -43,18 +44,16 @@ Let's start by setting [`mode` to `'development'`](/configuration/mode/#mode-dev
      index: './src/index.js',
      print: './src/print.js',
    },
-   experiments: {
-     html: true,
-   },
+   plugins: [
+     new HtmlWebpackPlugin({
+-      title: 'Output Management',
++      title: 'Development',
+     }),
+   ],
    output: {
      filename: '[name].bundle.js',
-     htmlFilename: '[name].html',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
-     html: {
--      title: 'Output Management',
-+      title: 'Development',
-     },
    },
  };
 ```
@@ -74,6 +73,7 @@ For this guide, let's use the `inline-source-map` option, which is good for illu
 ```diff
  import path from 'node:path';
  import { fileURLToPath } from 'node:url';
+ import HtmlWebpackPlugin from 'html-webpack-plugin';
 
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
@@ -85,17 +85,15 @@ For this guide, let's use the `inline-source-map` option, which is good for illu
      print: './src/print.js',
    },
 +  devtool: 'inline-source-map',
-   experiments: {
-     html: true,
-   },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Development',
+     }),
+   ],
    output: {
      filename: '[name].bundle.js',
-     htmlFilename: '[name].html',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
-     html: {
-       title: 'Development',
-     },
    },
  };
 ```
@@ -173,6 +171,7 @@ Let's add an npm script that will start webpack's Watch Mode:
    "author": "",
    "license": "ISC",
    "devDependencies": {
+     "html-webpack-plugin": "^5.6.6",
      "webpack": "^5.105.0",
      "webpack-cli": "^7.0.0"
    },
@@ -202,6 +201,8 @@ The only downside is that you have to refresh your browser in order to see the c
 
 ### Using webpack-dev-server
 
+T> Webpack can generate the page itself with [`output.html`](/configuration/output/#outputhtml) — see [Native HTML](/guides/native-html/). This guide keeps `HtmlWebpackPlugin` because it emits one page per entrypoint rather than a single page carrying every entry's script, so the output here would not be the same.
+
 The `webpack-dev-server` provides you with a rudimentary web server and the ability to use live reloading. Let's set it up:
 
 ```bash
@@ -215,6 +216,7 @@ Change your configuration file to tell the dev server where to look for files:
 ```diff
  import path from 'node:path';
  import { fileURLToPath } from 'node:url';
+ import HtmlWebpackPlugin from 'html-webpack-plugin';
 
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
@@ -229,17 +231,15 @@ Change your configuration file to tell the dev server where to look for files:
 +  devServer: {
 +    static: './dist',
 +  },
-   experiments: {
-     html: true,
-   },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Development',
+     }),
+   ],
    output: {
      filename: '[name].bundle.js',
-     htmlFilename: '[name].html',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
-     html: {
-       title: 'Development',
-     },
    },
 +  optimization: {
 +    runtimeChunk: 'single',
@@ -275,6 +275,7 @@ Let's add a script to easily run the dev server as well:
    "author": "",
    "license": "ISC",
    "devDependencies": {
+     "html-webpack-plugin": "^5.6.6",
      "webpack": "^5.105.0",
      "webpack-cli": "^7.0.0",
      "webpack-dev-server": "^5.2.3"
@@ -308,6 +309,7 @@ Now we need to make some adjustments to our webpack configuration file in order
 ```diff
  import path from 'node:path';
  import { fileURLToPath } from 'node:url';
+ import HtmlWebpackPlugin from 'html-webpack-plugin';
 
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
@@ -322,17 +324,15 @@ Now we need to make some adjustments to our webpack configuration file in order
    devServer: {
      static: './dist',
    },
-   experiments: {
-     html: true,
-   },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Development',
+     }),
+   ],
    output: {
      filename: '[name].bundle.js',
-     htmlFilename: '[name].html',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
-     html: {
-       title: 'Development',
-     },
 +    publicPath: '/',
    },
  };
@@ -402,6 +402,7 @@ Now add an npm script to make it a little easier to run the server:
    "license": "ISC",
    "devDependencies": {
      "express": "^5.2.1",
+     "html-webpack-plugin": "^5.6.6",
      "webpack": "^5.105.0",
      "webpack-cli": "^7.0.0",
      "webpack-dev-middleware": "^8.0.3",
diff --git a/src/content/guides/hot-module-replacement.mdx b/src/content/guides/hot-module-replacement.mdx
index 209bfb0f56d3..64cf42c8fa08 100644
--- a/src/content/guides/hot-module-replacement.mdx
+++ b/src/content/guides/hot-module-replacement.mdx
@@ -38,6 +38,8 @@ W> **HMR** is not intended for use in production, meaning it should only be used
 
 ## Enabling HMR
 
+T> Webpack can generate the page itself with [`output.html`](/configuration/output/#outputhtml) — see [Native HTML](/guides/native-html/). This guide keeps `HtmlWebpackPlugin` because it emits one page per entrypoint rather than a single page carrying every entry's script, so the output here would not be the same.
+
 This feature is great for productivity. All we need to do is update our [webpack-dev-server](https://github.com/webpack/webpack-dev-server) configuration, and use webpack's built-in HMR plugin. We'll also remove the entry point for `print.js` as it will now be consumed by the `index.js` module.
 
 Since `webpack-dev-server` v4.0.0, Hot Module Replacement is enabled by default.
@@ -49,6 +51,7 @@ T> If you took the route of using `webpack-dev-middleware` instead of `webpack-d
 ```diff
   import path from 'node:path';
   import { fileURLToPath } from 'node:url';
+  import HtmlWebpackPlugin from 'html-webpack-plugin';
 
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
@@ -63,17 +66,15 @@ T> If you took the route of using `webpack-dev-middleware` instead of `webpack-d
       static: './dist',
 +     hot: true,
     },
-    experiments: {
-      html: true,
-    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        title: 'Hot Module Replacement',
+      }),
+    ],
     output: {
       filename: '[name].bundle.js',
-      htmlFilename: '[name].html',
       path: path.resolve(__dirname, 'dist'),
       clean: true,
-      html: {
-        title: 'Hot Module Replacement',
-      },
     },
   };
 ```
@@ -85,6 +86,7 @@ you can also provide manual entry points for HMR:
 ```diff
   import path from 'node:path';
   import { fileURLToPath } from 'node:url';
+  import HtmlWebpackPlugin from 'html-webpack-plugin';
 + import webpack from 'webpack';
 
   const __filename = fileURLToPath(import.meta.url);
@@ -107,20 +109,16 @@ you can also provide manual entry points for HMR:
 +     client: false,
     },
     plugins: [
+      new HtmlWebpackPlugin({
+        title: 'Hot Module Replacement',
+      }),
 +     // Plugin for hot module replacement
 +     new webpack.HotModuleReplacementPlugin(),
     ],
-    experiments: {
-      html: true,
-    },
     output: {
       filename: '[name].bundle.js',
-      htmlFilename: '[name].html',
       path: path.resolve(__dirname, 'dist'),
       clean: true,
-      html: {
-        title: 'Hot Module Replacement',
-      },
     },
   };
 ```
@@ -197,6 +195,7 @@ To enable HMR, you also need to modify your webpack configuration object to incl
 ```js
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import HtmlWebpackPlugin from "html-webpack-plugin";
 import webpack from "webpack";
 import WebpackDevServer from "webpack-dev-server";
 
@@ -217,17 +216,14 @@ const config = {
   plugins: [
     // Plugin for hot module replacement
     new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      title: "Hot Module Replacement",
+    }),
   ],
-  experiments: {
-    html: true,
-  },
   output: {
     filename: "[name].bundle.js",
     path: path.resolve(__dirname, "dist"),
     clean: true,
-    html: {
-      title: "Hot Module Replacement",
-    },
   },
 };
 const compiler = webpack(config);
@@ -309,6 +305,7 @@ Now let's update the configuration file to make use of the loader.
 ```diff
   import path from 'node:path';
   import { fileURLToPath } from 'node:url';
+  import HtmlWebpackPlugin from 'html-webpack-plugin';
 
   const __filename = fileURLToPath(import.meta.url);
   const __dirname = path.dirname(__filename);
@@ -330,9 +327,13 @@ Now let's update the configuration file to make use of the loader.
 +       },
 +     ],
 +   },
+    plugins: [
+      new HtmlWebpackPlugin({
+        title: 'Hot Module Replacement',
+      }),
+    ],
     output: {
       filename: '[name].bundle.js',
-      htmlFilename: '[name].html',
       path: path.resolve(__dirname, 'dist'),
       clean: true,
     },
diff --git a/src/content/guides/modern-web-platform.mdx b/src/content/guides/modern-web-platform.mdx
index c8a2d2fcff3e..c2532d0a0388 100644
--- a/src/content/guides/modern-web-platform.mdx
+++ b/src/content/guides/modern-web-platform.mdx
@@ -172,9 +172,16 @@ export default {
   },
   output: {
     filename: "[name].[contenthash].js",
+    htmlFilename: "index.html",
     path: path.resolve(__dirname, "dist"),
     clean: true,
-    html: { title: "PWA + content hashes" },
+    html: {
+      title: "PWA + content hashes",
+      meta: {
+        charset: "utf8",
+        viewport: "width=device-width, initial-scale=1",
+      },
+    },
   },
   plugins: [
     new InjectManifest({
diff --git a/src/content/guides/production.mdx b/src/content/guides/production.mdx
index 7e17bbbae8d8..12f7fac7e455 100644
--- a/src/content/guides/production.mdx
+++ b/src/content/guides/production.mdx
@@ -78,10 +78,14 @@ npm install --save-dev webpack-merge
 +   },
 +   output: {
 +     filename: '[name].bundle.js',
-+     htmlFilename: '[name].html',
++     htmlFilename: 'index.html',
 +     path: path.resolve(__dirname, 'dist'),
 +     clean: true,
 +     html: {
++       meta: {
++         charset: 'UTF-8',
++         viewport: 'width=device-width, initial-scale=1',
++       },
 +       title: 'Production',
 +     },
 +   },
diff --git a/src/content/guides/progressive-web-application.mdx b/src/content/guides/progressive-web-application.mdx
index f5928e1cb2af..6658f3c03d68 100644
--- a/src/content/guides/progressive-web-application.mdx
+++ b/src/content/guides/progressive-web-application.mdx
@@ -56,6 +56,8 @@ This is what we aim to change. Once we reach the end of this module we should be
 
 ## Adding Workbox
 
+T> Webpack can generate the page itself with [`output.html`](/configuration/output/#outputhtml) — see [Native HTML](/guides/native-html/). This guide keeps `HtmlWebpackPlugin` because it emits one page per entrypoint rather than a single page carrying every entry's script, so the output here would not be the same.
+
 Let's add the Workbox webpack plugin and adjust the `webpack.config.js` file:
 
 ```bash
@@ -67,6 +69,7 @@ npm install workbox-webpack-plugin --save-dev
 ```diff
   import path from "node:path";
   import { fileURLToPath } from 'node:url';
+  import HtmlWebpackPlugin from "html-webpack-plugin";
 + import WorkboxPlugin from "workbox-webpack-plugin";
 
  const __filename = fileURLToPath(import.meta.url);
@@ -78,6 +81,10 @@ npm install workbox-webpack-plugin --save-dev
       print: './src/print.js',
     },
     plugins: [
+      new HtmlWebpackPlugin({
+-       title: 'Output Management',
++       title: 'Progressive Web Application',
+      }),
 +     new WorkboxPlugin.GenerateSW({
 +       // these options encourage the ServiceWorkers to get in there fast
 +       // and not allow any straggling "old" SWs to hang around
@@ -85,18 +92,10 @@ npm install workbox-webpack-plugin --save-dev
 +       skipWaiting: true,
 +     }),
     ],
-    experiments: {
-      html: true,
-    },
     output: {
       filename: '[name].bundle.js',
-      htmlFilename: '[name].html',
       path: path.resolve(__dirname, 'dist'),
       clean: true,
-      html: {
--       title: 'Output Management',
-+       title: 'Progressive Web Application',
-      },
     },
   };
 ```