diff --git a/.changeset/html-plugins-to-native-html.md b/.changeset/html-plugins-to-native-html.md
new file mode 100644
index 0000000..cff1bc8
--- /dev/null
+++ b/.changeset/html-plugins-to-native-html.md
@@ -0,0 +1,7 @@
+---
+"@webpack/html-plugins-to-native-html": major
+---
+
+Add a codemod migrating html-webpack-plugin and html-loader to webpack 5.112.0+ native HTML support and minification. Translate supported minification options, preserve existing configuration and still-used dependencies, and leave unsupported template/multi-page setups for manual migration.
+
+Apply template and dependency changes through AST workflow steps coordinated by shared state, without filesystem APIs or permissions; preserve dry-run behavior and idempotence.
diff --git a/.gitattributes b/.gitattributes
index f022253..4339578 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -3,3 +3,4 @@
 
 # CRLF fixtures exercise the editor's EOL detection — keep their bytes as-is.
 codemods/*/tests/crlf/* -text
+codemods/html-plugins-to-native-html/tests/template-chunks/crlf/* -text
diff --git a/README.md b/README.md
index 120eb19..c16dc66 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,7 @@ npx codemod run @webpack/<codemod-name>
 | Codemod                                                                        | Description                                                                                                    |
 | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
 | [`css-plugins-to-native-css`](codemods/css-plugins-to-native-css)               | Migrate `mini-css-extract-plugin` and `style-loader`/`css-loader` rules to webpack's native CSS support (`experiments.css`). |
+| [`html-plugins-to-native-html`](codemods/html-plugins-to-native-html)           | Migrate `html-webpack-plugin` and `html-loader` to native HTML support and minification.                 |
 
 ## Contributing
 
diff --git a/codemods/html-plugins-to-native-html/README.md b/codemods/html-plugins-to-native-html/README.md
new file mode 100644
index 0000000..49c4e8a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/README.md
@@ -0,0 +1,150 @@
+# @webpack/html-plugins-to-native-html
+
+Migrates webpack configurations from `html-webpack-plugin` and `html-loader` to webpack's native HTML support (`experiments.html` + `output.html`).
+
+> Requires **webpack >= 5.112.0**: the transform uses native HTML generation and the built-in HTML minifier, configured through `optimization.minimizeOptions.html`, and HTML chunk names introduced in 5.112.
+
+## What it does
+
+- Removes `new HtmlWebpackPlugin(...)` from `plugins` (and the whole `plugins` entry when it becomes empty), and the `html-webpack-plugin` `require`/`import` once it is unused.
+- Enables the native pipeline with `experiments: { html: true }` and `output.html` on each migrated configuration.
+- Sets `output.htmlFilename` to the plugin's `filename` — or to `"index.html"`, the plugin's default, since the native default is `[name].html`.
+- Maps plugin options to their `output.html` counterparts: `title`, `meta` (string values, plus `{ name | property, content }` objects — `og:*` keys included), `favicon`, `base`, `inject` (`"body"`/`"head"`/`false`; `true` is the native default), and `scriptLoading` — `"blocking"` maps directly, `"defer"` is the native default, and `"module"` becomes `output.module: true` (stable ESM output since webpack 5.111; obsolete literal `experiments.outputModule` flags are removed).
+- Uses webpack's built-in HTML minifier and translates supported `minify` options to `optimization.minimizeOptions.html`; see [Minification](#minification). Build-only options (`cache`, `showErrors`, `chunksSortMode`, `chunks: "all"`, `publicPath: "auto"`) are dropped.
+- **Multi-page setups**: several instances (or a `chunks: ["name"]` list) map to per-entry `html` descriptors — each listed entry becomes `{ import: …, html: <options> }`, unlisted entries get no page, and `output.htmlFilename: "[name].html"` covers the per-page filenames. Requires each instance to own exactly one entry via `chunks` and no `template`; instance filenames other than `<entry>.html`/`[name].html` are flagged.
+- Options without a native equivalent (`hash`, unsupported `minify` settings, `chunks` arrays, `templateContent`, `templateParameters`, …) are dropped with a `// Removed html-webpack-plugin options without a native HTML equivalent: …` comment so you can review the behavior change; a manual migration path is appended where one exists.
+- **Companion plugins** found next to a migrated `html-webpack-plugin` instance are migrated too: `csp-html-webpack-plugin` → `output.html.csp` (its policy argument becomes `csp.policy`), `webpack-subresource-integrity` → `output.html.integrity` (`hashFuncNames` becomes the algorithm list; `enabled: false` just removes it), and `favicons-webpack-plugin` → `output.html.favicon` (a literal logo path becomes a single icon). Favicon migration always adds a review comment: generate the additional icon sizes/formats and web app manifest manually and configure their links. Native HTML does not reproduce that generation. Options beyond that are dropped with a review comment; instances whose arguments can't be understood are left in place with a comment. In template/multi-page modes options that only apply to generated pages are flagged instead.
+- Migrates `HtmlWebpackPlugin.getHooks(...)` taps to the native `webpack.html.HtmlModulesPlugin.getCompilationHooks(...)` stage covering the same moment: `alterAssetTags`/`alterAssetTagGroups` → `transformTags`, `beforeEmit` → `transformHtml`, `afterEmit` → `htmlEmitted`. The native stages take different arguments (`transformTags` hands you mutable tag descriptors instead of `data.assetTags`/head-body arrays; `transformHtml` is a waterfall on the HTML string instead of `data.html`), so each renamed tap gets a `// Review: …` comment describing the new signature — review the callback body.
+
+### `html-loader`
+
+- Removes rules that only wire up `html-loader` (cascading to empty `rules`/`module` entries): with no user rule matching `.html`, webpack's `experiments.html: "auto"` default enables native HTML by itself, and importing an `.html` file from JS natively yields the processed HTML string — the same shape `html-loader` exported.
+- Rules with extra conditions or surviving options are kept with `type: "html"` instead — and since their presence disables the `"auto"` default, `experiments.html: true` is added to that configuration.
+- Any other loader in the chain (template compilers, custom ones) keeps working in front of native HTML: it stays in `use` while `html-loader` is dropped.
+- Boolean `sources` becomes the rule's `parser: { sources }`, and static `sources.list` arrays become `parser.sources` (including `"..."`, `src` and `srcset` entries). Lists using `"..."` also normalize the global default to `module.parser.html.sources: ["..."]`, so webpack can merge the rule without expanding the boolean `true` into the list. Existing custom or disabled global source lists require manual merging and keep their loader rule.
+- Static source `filter` callbacks are adapted to native attribute maps, including callbacks reading `{ name, value }` attributes. Filters using the resource path, foreign-attribute namespace metadata or an unknown tag stay on the loader. `sources.urlFilter` maps to filters on explicit `src` lists; constant `false` disables URL extraction. Per-candidate `srcset` filtering and global URL filters over `"..."` need manual adaptation. `scriptingEnabled: true` uses native defaults; `false` has no native equivalent.
+- Inline synchronous `preprocessor` functions with a known string result become `parser.template`. The context adapter preserves dependency registration and diagnostics, and translates `resourcePath`, `resourceQuery`, `resourceFragment`, and the resource directory to the native context. Supported functions take the content and optionally the context argument and return a string literal, template literal, the content, or string operations such as `replace`/`trim` (including `const` intermediates).
+- Both literal `esModule: true` and `false` migrate: native HTML exposes the string through default imports and directly through CommonJS `require()`. Dynamic values are kept for manual review. `minimize` uses the native minifier option mapping below; unsupported loader settings keep the original configuration.
+- An identity `postprocessor` is removed. Other postprocessors are preserved: they receive a serialized JavaScript expression, whereas native `transformHtml` receives emitted HTML and cannot replace that contract.
+
+The complete public option set is checked against the [loader schema](https://github.com/webpack/html-loader/blob/main/src/options.json) and [processing pipeline](https://github.com/webpack/html-loader/blob/main/src/index.js):
+
+| Loader option | Automatic migration | Requires manual adaptation |
+| --- | --- | --- |
+| `sources` | Literal booleans and static objects | Dynamic values/spreads |
+| `sources.list` | Static `src`/`srcset` entries and `"..."` | Dynamic lists or conflicting global parser settings |
+| `sources.list[].filter` | Inline callbacks using known tags, attributes and `{ name, value }` arrays | Resource-path-dependent or namespace-sensitive callbacks; wildcard filters that read the tag name |
+| `sources.urlFilter` | Constant decisions; inline callbacks on explicit `src` lists | Default source expansion, per-candidate `srcset` filtering, or resource-path-dependent callbacks |
+| `sources.scriptingEnabled` | `true` uses native defaults | `false`: native HTML has no corresponding `<noscript>` parsing switch |
+| `preprocessor` | Known synchronous string transformations and supported context operations | Async callbacks, unknown returns, dynamic references, unsupported loader APIs |
+| `postprocessor` | Identity callbacks | Transformations of the serialized JavaScript expression, including async ones |
+| `minimize` | Booleans and the option translations below | Options without a native equivalent, dynamic expressions and incompatible callbacks |
+| `esModule` | Both literal booleans | Dynamic values |
+
+### `template`
+
+`output.html` generates each page from scratch, so an authored template maps to webpack's other native mode instead: the **HTML entry point**. The configuration transform makes the template the entry and records the previous JS entry in workflow state. A separate HTML AST transform adds the corresponding `<script defer src="…"></script>` before `</head>` (or `</body>`), preserving line endings and avoiding duplicate script references. Comments containing script markup do not count as existing scripts. A `webpackChunkName` comment preserves the previous entry name (`main` for unnamed entries). Existing matching scripts are annotated without duplication, while existing webpack magic comments take precedence. If several configs request different names for the same script in a shared template, webpack's default naming is kept for manual review.
+
+All changes are returned to the codemod runner; the transforms do not use filesystem APIs. This keeps template changes inside the normal workflow and makes `--dry-run` safe. Only `.html` templates included in the workflow are edited. The configuration keeps a review comment with the script reference for missing/excluded templates and when running the configuration transform alone. Since head tags are only injected into webpack-generated pages, `title`/`meta`/`favicon`/`base` are flagged to be added to the template instead.
+
+### What is left untouched
+
+If a loader rule cannot migrate, its owning configuration (including its HTML plugin and other loader rules) is preserved together. This prevents the native HTML parser from receiving JavaScript generated by a retained loader. Independent configurations in the same file can still migrate.
+
+- Configurations using dynamic or spread favicon options without a statically known logo path; their HTML plugin and loaders are kept together.
+- Multi-page configurations the per-entry shape can't express: an instance whose `chunks` lists several entries (one page aggregating several chunks), combines `chunks` with `template`, or names an entry the config's `entry` object doesn't declare.
+- Files that tap `beforeAssetTagGeneration` or `afterTemplateExecution` via `HtmlWebpackPlugin.getHooks(...)`: those stages have no native equivalent (webpack builds the tags and runs the parser template itself).
+- Plugin instantiations whose options are not an object literal, or contain spreads/shorthand properties.
+- Configurations with computed `output` or `experiments`, dynamic template paths, or templates whose JS entry cannot be represented by a single script.
+- Multi-page configurations with different minification settings per page: native minification applies to the whole compilation.
+- Rules whose existing dynamic `parser` or `experiments` cannot safely receive the migrated settings, or whose parser options conflict with the migrated values.
+- Async preprocessors, unknown return values, functions using unsupported LoaderContext APIs (such as `resolve`, `getOptions` or `async`), and functions using `this`/`arguments` or assignments remain on the loader for manual adaptation. Native `parser.template` must return a string synchronously and has a different context API.
+- Loader source lists with unsupported callbacks, `scriptingEnabled: false`, dynamic expressions or spreads; these require manual adaptation to the native API.
+
+### Minification
+
+The [built-in HTML minifier](https://webpack.js.org/configuration/optimization/#optimizationminimizeoptions) needs no additional package. Absent options, `minify: true`, and `minify: "auto"` use webpack's defaults. The codemod preserves `mode` and `optimization.minimize`: minification runs in production by default. If the old plugin explicitly minified in development, set `optimization.minimize: true` after migration; this also enables the other configured minimizers.
+
+Both plugin `minify` and loader `minimize` accept these translations:
+
+| Original setting | Native setting under `optimization.minimizeOptions` |
+| --- | --- |
+| `false` | `html: false` (JS/CSS keep their settings) |
+| `collapseWhitespace`, `collapseBooleanAttributes`, `minifyConditionalComments`, `removeEmptyAttributes`, `removeEmptyElements`, `removeRedundantAttributes`, `sortAttributes` | Same boolean property in `html` |
+| `removeComments` | Inverted `html.comments`; preserving comments also disables extraction to a license file |
+| `ignoreCustomComments: [RegExp, …]` with `removeComments: true` | A self-contained `html.comments` predicate and `html.extractComments: false` |
+| `removeAttributeQuotes` | `html.normalizeAttributeQuotes` |
+| `removeOptionalTags` | Both `html.removeOptionalTags` and `html.removeImpliedTags` |
+| `conservativeCollapse: true` | Covered by native whitespace handling |
+| `conservativeCollapse: false` with `collapseWhitespace: true` | `html.collapseWhitespace: "all"` |
+
+For example, `new HtmlWebpackPlugin({ minify: { removeComments: false, collapseWhitespace: false } })` adds:
+
+```js
+optimization: {
+  minimizeOptions: {
+    html: { comments: true, extractComments: false, collapseWhitespace: false },
+  },
+},
+```
+
+Existing native HTML minification options take precedence and receive a review comment. Other asset types' settings are preserved, including the `optimization.minimize: { javascript: … }` shorthand. A custom literal `optimization.minimizer` list gets `"..."` appended once, after its existing plugins, to restore webpack's default minimizers; this also restores default JS/CSS processing for assets the custom plugins leave unminimized. A migration that disables HTML minification does not add that default entry. Dynamic optimization/minimizer values receive instructions for manual integration.
+
+The native minifier has different whitespace and attribute normalization rules from `html-minifier-terser`; this is not a byte-for-byte output conversion. Unknown or dynamic plugin options, including embedded `minifyJS`/`minifyCSS` options, get review comments instead of being passed to an incompatible API. For `html-loader`, unsupported minimization options preserve the owning configuration rather than dropping behavior. Loader settings become compilation-wide settings. Conflicting loader/page settings are flagged for manual review.
+
+## Usage
+
+```sh
+npx codemod run @webpack/html-plugins-to-native-html
+```
+
+The workflow runs the configuration, HTML-template, and dependency transforms in sequence. It does not require filesystem permissions.
+
+## Example
+
+```diff
+-const HtmlWebpackPlugin = require("html-webpack-plugin");
+-
+ module.exports = {
++  output: {
++    html: { title: "My App", meta: { viewport: "width=device-width, initial-scale=1" } },
++    htmlFilename: "app.html",
++  },
++  experiments: {
++    html: true,
++  },
+   entry: "./src/index.js",
+-  plugins: [
+-    new HtmlWebpackPlugin({
+-      filename: "app.html",
+-      title: "My App",
+-      meta: { viewport: "width=device-width, initial-scale=1" },
+-    }),
+-  ],
+ };
+```
+
+With a `template`, the template becomes the entry point and gets a `<script>` tag for the previous entry added to it:
+
+```diff
+-const HtmlWebpackPlugin = require("html-webpack-plugin");
+-
+ module.exports = {
+-  entry: "./src/index.js",
+-  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
++  experiments: {
++    html: true,
++  },
++  // The template is now the entry: it must load the previous entry via <!-- webpackChunkName: "main" --> <script defer src="./index.js"></script> (added by the HTML workflow step when the template is included)
++  entry: "./src/index.html",
++  output: {
++    htmlFilename: "index.html",
++  },
+ };
+```
+
+After migration, the codemod removes unused `html-webpack-plugin`, `html-loader`, and supported companion plugins from `dependencies` and `devDependencies`. The configuration step records remaining package references in workflow state, scoped by source filename. The JSON transform combines those references with other manifest fields, preserving packages still referenced beneath that manifest by skipped configs or other tooling. Running the JSON transform alone keeps dependencies because no source-reference scan is available. Run your package manager afterward to update the lockfile.
+
+Reference detection walks the migrated AST and reads literal module requests, including escaped strings, static concatenations, package subpaths and inline loader chains. Comments and incidental mentions in prose do not keep an unused dependency. Dynamic imports/resolvers and syntax errors keep the HTML packages for manual review. Manifest fields are inspected through their JSON nodes; npm scripts retain conservative checks on their decoded shell commands.
+
+Syntax checks for callbacks, parser-option conflicts and HTML tags also use AST nodes. Text handling remains for literal values, paths, escaping, whitespace preservation and webpack directives inside comments, whose contents are not parsed by the HTML grammar.
diff --git a/codemods/html-plugins-to-native-html/codemod.yaml b/codemods/html-plugins-to-native-html/codemod.yaml
new file mode 100644
index 0000000..bf39e0c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/codemod.yaml
@@ -0,0 +1,23 @@
+schema_version: "1.0"
+name: "@webpack/html-plugins-to-native-html"
+version: "0.0.0"
+description: Migrate html-webpack-plugin and html-loader to webpack's native HTML support and minification
+author: bjohansebas (Sebastian Beltran)
+license: MIT
+workflow: workflow.yaml
+repository: "https://github.com/webpack/codemods/tree/HEAD/codemods/html-plugins-to-native-html"
+category: migration
+
+targets:
+  languages:
+    - javascript
+    - typescript
+
+keywords:
+  - transformation
+  - migration
+  - webpack
+
+registry:
+  access: public
+  visibility: public
diff --git a/codemods/html-plugins-to-native-html/package.json b/codemods/html-plugins-to-native-html/package.json
new file mode 100644
index 0000000..161daba
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@webpack/html-plugins-to-native-html",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "test": "npm run test:workflow && npm run test:templates && npm run test:dependencies && npm run test:integration",
+    "test:workflow": "npx codemod jssg test -l typescript ./src/workflow.ts",
+    "test:dependencies": "npx codemod jssg test -l json ./tests/remove-dependencies.ts ./tests/remove-dependencies",
+    "test:templates": "npx codemod jssg test -l html ./tests/templates.ts ./tests/templates && npx codemod jssg test -l html ./tests/template-chunks.ts ./tests/template-chunks",
+    "test:integration": "node --test ./tests/*.test.mjs"
+  },
+  "dependencies": {
+    "@webpack/codemod-utils": "*"
+  },
+  "devDependencies": {
+    "@codemod.com/jssg-types": "^1.6.2"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/src/config-plan.ts b/codemods/html-plugins-to-native-html/src/config-plan.ts
new file mode 100644
index 0000000..42ea1da
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/config-plan.ts
@@ -0,0 +1,328 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import { ConfigEditor, findPair, namedChildren, unquote } from "@webpack/codemod-utils";
+import { planMinification, type Minification } from "./minification";
+
+export interface HtmlProp {
+  name: string;
+  valueText: string;
+}
+
+export function dedupeProps(props: HtmlProp[]): HtmlProp[] {
+  const seen = new Set<string>();
+
+  return props.filter((prop) => !seen.has(prop.name) && seen.add(prop.name));
+}
+
+// Properties to add to one webpack config object once all removals are known.
+export interface ConfigPlan {
+  config: SgNode<Js>;
+  sourceDefaults: boolean;
+  minification: Minification[];
+  commentLines: string[];
+  // Emit a global `output.html` (single-page mode; per-entry pages skip it).
+  htmlEnabled: boolean;
+  // Props composing the `output.html` object (plugin options, sibling plugins).
+  htmlProps: HtmlProp[];
+  htmlFilename: string | null;
+  // Other output-level props (e.g. `module` for ESM script loading).
+  outputProps: HtmlProp[];
+  experimentsProps: HtmlProp[];
+  pendingEntry: { text: string; comment: string } | null;
+  // A html-webpack-plugin instance in this config was migrated.
+  pluginMigratedHere: boolean;
+}
+
+export class ConfigPlans {
+  private readonly configPlans = new Map<number, ConfigPlan>();
+
+  private readonly editor: ConfigEditor;
+
+  constructor(editor: ConfigEditor) {
+    this.editor = editor;
+  }
+
+  planFor(config: SgNode<Js>): ConfigPlan {
+    const key = config.range().start.index;
+    let plan = this.configPlans.get(key);
+
+    if (!plan) {
+      plan = {
+        config,
+        sourceDefaults: false,
+        minification: [],
+        commentLines: [],
+        htmlEnabled: false,
+        htmlProps: [],
+        htmlFilename: null,
+        outputProps: [],
+        experimentsProps: [],
+        pendingEntry: null,
+        pluginMigratedHere: false,
+      };
+      this.configPlans.set(key, plan);
+    }
+
+    return plan;
+  }
+
+  requireExperimentsHtml(plan: ConfigPlan): void {
+    if (!plan.experimentsProps.some((prop) => prop.name === "html")) {
+      plan.experimentsProps.push({ name: "html", valueText: "true" });
+    }
+  }
+
+  // `scriptLoading: "module"` means ESM output — a config-wide switch.
+  applyModuleScripts(plan: ConfigPlan, moduleScripts: boolean): void {
+    if (!moduleScripts) {
+      return;
+    }
+
+    if (!plan.outputProps.some((prop) => prop.name === "module")) {
+      plan.outputProps.push({ name: "module", valueText: "true" });
+    }
+
+    // ESM output is stable since webpack 5.111. Remove the obsolete flag
+    // only when its value is a literal, preserving any expression side effects.
+    const experiments = findPair(plan.config, "experiments")?.field("value");
+    const flag = experiments?.is("object") ? findPair(experiments, "outputModule") : undefined;
+    const value = flag?.field("value");
+
+    if (flag && (value?.is("true") || value?.is("false"))) {
+      this.editor.keepBracesOpen(experiments!);
+      this.editor.markForRemoval(flag);
+    }
+  }
+
+  canNormalizeSourceDefaults(config: SgNode<Js>): boolean {
+    let current: SgNode<Js> = config;
+
+    for (const name of ["module", "parser", "html"]) {
+      const value = findPair(current, name)?.field("value");
+
+      if (!value) {
+        return true;
+      }
+
+      if (
+        !value.is("object") ||
+        namedChildren(value).some((child) => !child.is("pair") && !child.is("comment"))
+      ) {
+        return false;
+      }
+
+      current = value;
+    }
+
+    const sources = findPair(current, "sources")?.field("value");
+
+    if (!sources || sources.is("true")) {
+      return true;
+    }
+
+    const elements = sources.is("array")
+      ? namedChildren(sources).filter((node) => !node.is("comment"))
+      : [];
+
+    return (
+      elements.length === 1 && elements[0].is("string") && unquote(elements[0].text()) === "..."
+    );
+  }
+
+  private normalizeSourceDefaults(config: SgNode<Js>): void {
+    // Rule parser options are clever-merged with global HTML parser defaults.
+    // Its default `sources: true` would expand a rule's "..." to `[true, ...]`,
+    // which fails validation. `["..."]` is equivalent but survives that merge.
+    let current = findPair(config, "module")!.field("value")!;
+
+    for (const [name, text] of [
+      ["parser", 'parser: { html: { sources: ["..."] } }'],
+      ["html", 'html: { sources: ["..."] }'],
+    ]) {
+      const value = findPair(current, name)?.field("value");
+
+      if (!value) {
+        this.editor.insertIntoObject(current, () => [text]);
+
+        return;
+      }
+
+      current = value;
+    }
+
+    const sources = findPair(current, "sources")?.field("value");
+
+    if (sources?.is("true")) {
+      this.editor.replace(sources, '["..."]');
+    } else if (!sources) {
+      this.editor.insertIntoObject(current, () => ['sources: ["..."]']);
+    }
+  }
+
+  planConfigInsertions(): void {
+    for (const plan of this.configPlans.values()) {
+      if (plan.sourceDefaults) {
+        this.normalizeSourceDefaults(plan.config);
+      }
+
+      const topProperties: ((indent: string, unit: string) => string)[] = [];
+      const optimization = planMinification(
+        this.editor,
+        plan.config,
+        plan.minification,
+        plan.commentLines,
+      );
+
+      if (optimization) {
+        topProperties.push(() => optimization);
+      }
+
+      const pendingEntry = plan.pendingEntry;
+
+      if (pendingEntry) {
+        topProperties.push(
+          (indent) => `// ${pendingEntry.comment}\n${indent}entry: ${pendingEntry.text}`,
+        );
+      }
+
+      const outputProps: HtmlProp[] = [];
+      const htmlProps = dedupeProps(plan.htmlProps);
+      const existingOutput = findPair(plan.config, "output")?.field("value");
+      const existingHtml = existingOutput?.is("object")
+        ? findPair(existingOutput, "html")?.field("value")
+        : undefined;
+
+      if (existingHtml?.is("object")) {
+        const missing = htmlProps.filter((prop) => !findPair(existingHtml, prop.name));
+
+        if (missing.length) {
+          this.editor.insertIntoObject(existingHtml, () =>
+            missing.map((prop) => `${prop.name}: ${prop.valueText}`),
+          );
+        }
+      }
+
+      if (plan.htmlEnabled || htmlProps.length) {
+        outputProps.push({
+          name: "html",
+          valueText: htmlProps.length
+            ? `{ ${htmlProps.map((prop) => `${prop.name}: ${prop.valueText}`).join(", ")} }`
+            : "true",
+        });
+      }
+
+      if (plan.htmlFilename !== null) {
+        outputProps.push({ name: "htmlFilename", valueText: plan.htmlFilename });
+      }
+
+      outputProps.push(...plan.outputProps);
+
+      if (outputProps.length) {
+        this.planObjectProps(plan.config, "output", outputProps, plan.commentLines, topProperties);
+      }
+
+      if (plan.experimentsProps.length) {
+        this.planObjectProps(
+          plan.config,
+          "experiments",
+          plan.experimentsProps,
+          outputProps.length ? [] : plan.commentLines,
+          topProperties,
+        );
+      }
+
+      if (!outputProps.length && !plan.experimentsProps.length && plan.commentLines.length) {
+        this.insertReviewComments(plan.config, plan.commentLines);
+      }
+
+      if (topProperties.length) {
+        // A fully-emptied config keeps its braces open for these properties.
+        this.editor.keepBracesOpen(plan.config);
+        this.editor.insertIntoObject(plan.config, (indent, unit) =>
+          topProperties.map((build) => build(indent, unit)),
+        );
+      }
+    }
+  }
+
+  private insertReviewComments(node: SgNode<Js>, lines: string[]): void {
+    if (!lines.length) {
+      return;
+    }
+
+    const position = node.range().start.index;
+
+    this.editor.addEdit({
+      startPos: position,
+      endPos: position,
+      insertedText: `/* ${lines.join("; ").replace(/\*\//g, "* /")} */ `,
+    });
+  }
+
+  // Insert props into the config's `key` object, creating it when absent; an
+  // existing non-object value (e.g. a variable) is left alone. Comment lines
+  // ride on the first inserted property.
+  private planObjectProps(
+    config: SgNode<Js>,
+    key: string,
+    props: HtmlProp[],
+    commentLines: string[],
+    topProperties: ((indent: string, unit: string) => string)[],
+  ): void {
+    const withComments = (propertyText: string, indent: string, first: boolean): string => {
+      if (!first || !commentLines.length) {
+        return propertyText;
+      }
+
+      if (config.range().start.line === config.range().end.line) {
+        return `/* ${commentLines.join("; ").replace(/\*\//g, "* /")} */ ${propertyText}`;
+      }
+
+      return `${commentLines.map((line) => `// ${line}\n${indent}`).join("")}${propertyText}`;
+    };
+    const value = findPair(config, key)?.field("value");
+
+    if (value && value.is("object")) {
+      for (const prop of props) {
+        const existing = findPair(value, prop.name)?.field("value");
+
+        if (!existing) {
+          continue;
+        }
+
+        if (
+          (key === "experiments" && prop.name === "html") ||
+          (key === "output" && prop.name === "module") ||
+          (key === "output" &&
+            prop.name === "html" &&
+            (existing.is("false") || existing.is("true")))
+        ) {
+          this.editor.replace(existing, prop.valueText);
+        }
+      }
+
+      const missing = props.filter((prop) => !findPair(value, prop.name));
+
+      if (!missing.length) {
+        this.insertReviewComments(value, commentLines);
+
+        return;
+      }
+
+      this.editor.insertIntoObject(value, (indent) =>
+        missing.map((prop, index) =>
+          withComments(`${prop.name}: ${prop.valueText}`, indent, index === 0),
+        ),
+      );
+    } else if (!value) {
+      topProperties.push((indent, unit) => {
+        const inner = indent + unit;
+        const texts = props.map((prop, index) =>
+          withComments(`${prop.name}: ${prop.valueText}`, inner, index === 0),
+        );
+
+        return `${key}: {\n${texts.map((text) => `${inner}${text}`).join(",\n")},\n${indent}}`;
+      });
+    }
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/src/loaders/callbacks.ts b/codemods/html-plugins-to-native-html/src/loaders/callbacks.ts
new file mode 100644
index 0000000..af7b1c9
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/loaders/callbacks.ts
@@ -0,0 +1,85 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import { namedChildren } from "@webpack/codemod-utils";
+
+export function callbackParameters(value: SgNode<Js>): SgNode<Js>[] | null {
+  if (!["arrow_function", "function_expression"].some((kind) => value.is(kind))) {
+    return null;
+  }
+
+  if (value.children().some((node) => node.is("async"))) {
+    return null;
+  }
+
+  if (value.findAll({ rule: { any: [{ kind: "this" }, { pattern: "arguments" }] } }).length) {
+    return null;
+  }
+
+  const parameters = value.field("parameters");
+  const parameter = value.field("parameter");
+  const params = parameters
+    ? namedChildren(parameters).filter((node) => !node.is("comment"))
+    : parameter
+    ? [parameter]
+    : [];
+
+  if (
+    params.some(
+      (param) => param.field("value") || param.is("assignment_pattern") || param.is("rest_pattern"),
+    )
+  ) {
+    return null;
+  }
+
+  const names = params.map((param) => param.field("pattern") ?? param);
+
+  return names.every((name) => name.is("identifier")) ? names : null;
+}
+
+export function isIdentityCallback(value: SgNode<Js>): boolean {
+  const params = callbackParameters(value);
+
+  if (!params?.length) {
+    return false;
+  }
+
+  let body = value.field("body");
+
+  if (body?.is("statement_block")) {
+    const statements = namedChildren(body).filter((node) => !node.is("comment"));
+
+    if (statements.length !== 1 || !statements[0].is("return_statement")) {
+      return false;
+    }
+
+    body = namedChildren(statements[0]).find((node) => !node.is("comment")) ?? null;
+  }
+
+  return !!body?.is("identifier") && body.text() === params[0].text();
+}
+
+export function usesParameter(value: SgNode<Js>, params: SgNode<Js>[], index: number): boolean {
+  const param = params[index];
+
+  return !!param && !!value.field("body")?.findAll({ rule: { pattern: param.text() } }).length;
+}
+
+export function constantBoolean(value: SgNode<Js>): string | null {
+  if (!callbackParameters(value)) {
+    return null;
+  }
+
+  let body = value.field("body");
+
+  if (body?.is("statement_block")) {
+    const statements = namedChildren(body).filter((node) => !node.is("comment"));
+
+    if (statements.length !== 1 || !statements[0].is("return_statement")) {
+      return null;
+    }
+
+    body = namedChildren(statements[0])[0] ?? null;
+  }
+
+  return body?.is("true") || body?.is("false") ? body.text() : null;
+}
diff --git a/codemods/html-plugins-to-native-html/src/loaders/options.ts b/codemods/html-plugins-to-native-html/src/loaders/options.ts
new file mode 100644
index 0000000..03ebbcd
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/loaders/options.ts
@@ -0,0 +1,125 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import {
+  findPair,
+  guardBranchesOf,
+  keyName,
+  loaderNameOf,
+  namedChildren,
+  pairsOf,
+} from "@webpack/codemod-utils";
+import { collectMinification, type Minification } from "../minification";
+import type { HtmlProp } from "../config-plan";
+import { isIdentityCallback } from "./callbacks";
+import { nativeSources } from "./sources";
+import { nativeTemplate } from "./template";
+
+export const LOADER_NAME = "html-loader";
+
+// Loader options translated into the surviving rule and migration eligibility.
+export interface LoaderFindings {
+  supported: boolean;
+  sourceDefaults: boolean;
+  parserProps: HtmlProp[];
+  minification: Minification[];
+}
+
+// Translate known equivalents; retain the config when an option would lose
+// executable behavior or change the module's export contract.
+export function collectLoaderFindings(
+  node: SgNode<Js>,
+  findings: LoaderFindings,
+  typescript: boolean,
+): void {
+  const branches = guardBranchesOf(node);
+
+  if (branches) {
+    for (const branch of branches) {
+      collectLoaderFindings(branch, findings, typescript);
+    }
+
+    return;
+  }
+
+  if (!node.is("object") || loaderNameOf(node) !== LOADER_NAME) {
+    return;
+  }
+
+  const optionsValue = findPair(node, "options")?.field("value");
+  const minification = collectMinification(
+    optionsValue?.is("object") ? findPair(optionsValue, "minimize")?.field("value") : undefined,
+    `${LOADER_NAME}.minimize`,
+  );
+
+  findings.minification.push(minification);
+
+  if (minification.lost.length) {
+    findings.supported = false;
+  }
+
+  if (!optionsValue) {
+    return;
+  }
+
+  if (!optionsValue.is("object")) {
+    findings.supported = false;
+
+    return;
+  }
+
+  if (namedChildren(optionsValue).some((child) => !child.is("pair") && !child.is("comment"))) {
+    findings.supported = false;
+
+    return;
+  }
+
+  for (const optionPair of pairsOf(optionsValue)) {
+    const name = keyName(optionPair);
+    const value = optionPair.field("value");
+
+    if (name === "esModule") {
+      // Native HTML exposes a default string export and its CJS shim also
+      // returns that string directly, so both literal settings can migrate.
+      if (!value?.is("true") && !value?.is("false")) {
+        findings.supported = false;
+      }
+
+      continue;
+    }
+
+    if (name === "minimize") {
+      continue;
+    }
+
+    if (name === "sources" && value) {
+      const sources = nativeSources(value, typescript);
+
+      if (sources === null) {
+        findings.supported = false;
+      } else {
+        findings.parserProps.push({ name: "sources", valueText: sources.text });
+        findings.sourceDefaults ||= sources.extendsDefaults;
+      }
+
+      continue;
+    }
+
+    if (name === "preprocessor" && value) {
+      const template = nativeTemplate(value, typescript);
+
+      if (template === null) {
+        findings.supported = false;
+      } else {
+        findings.parserProps.push({ name: "template", valueText: template });
+      }
+
+      continue;
+    }
+
+    if (name === "postprocessor" && value && isIdentityCallback(value)) {
+      continue;
+    }
+
+    findings.supported = false;
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/src/loaders/rules.ts b/codemods/html-plugins-to-native-html/src/loaders/rules.ts
new file mode 100644
index 0000000..8071e8c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/loaders/rules.ts
@@ -0,0 +1,364 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import {
+  ConfigEditor,
+  cascadeRemovalTarget,
+  filterSuffixOf,
+  findConfigObjectFor,
+  findPair,
+  guardBranchesOf,
+  keyName,
+  lineIndent,
+  loaderNameOf,
+  namedChildren,
+  pairsOf,
+  parseExpression,
+  ruleMatchesFiles,
+  sameSyntax,
+  unwrapFilterCall,
+} from "@webpack/codemod-utils";
+import { ConfigPlans, dedupeProps } from "../config-plan";
+import { collectLoaderFindings, LOADER_NAME, type LoaderFindings } from "./options";
+
+const HTML_SAMPLE_FILES = ["/file.html"];
+
+function isDefaultHtmlTest(node: SgNode<Js> | null | undefined): boolean {
+  if (!node?.is("regex")) {
+    return false;
+  }
+
+  const flags = node.field("flags")?.text() ?? "";
+
+  return node.field("pattern")?.text() === "\\.html$" && (flags === "" || flags === "i");
+}
+
+interface RuleMigration {
+  pair: SgNode<Js>;
+  ruleObject: SgNode<Js>;
+  kept: SgNode<Js>[];
+  filterSuffix: string;
+  findings: LoaderFindings;
+  trivial: boolean;
+  optionsPair: SgNode<Js> | null;
+}
+
+export class HtmlLoaderRules {
+  private readonly typescript: boolean;
+
+  private readonly editor: ConfigEditor;
+  private readonly plans: ConfigPlans;
+  private readonly blockedConfigs: Set<number>;
+
+  constructor(editor: ConfigEditor, plans: ConfigPlans, blockedConfigs: Set<number>) {
+    this.editor = editor;
+    this.plans = plans;
+    this.blockedConfigs = blockedConfigs;
+
+    this.typescript = /\.[cm]?tsx?$/.test(editor.rootNode.getRoot().filename());
+  }
+
+  // A `use` entry replaceable by native HTML, unwrapping dev/prod guards.
+  private isRemovableUseElement(node: SgNode<Js>): boolean {
+    const branches = guardBranchesOf(node);
+
+    if (branches) {
+      return branches.length > 0 && branches.every((branch) => this.isRemovableUseElement(branch));
+    }
+
+    return loaderNameOf(node) === LOADER_NAME;
+  }
+
+  // Webpack owns the rule when its array hangs on a `rules`/`oneOf` pair or
+  // the config has a `module` ancestor — never fragments pushed into another
+  // tool's config (Storybook, craco, …).
+  private isWebpackRuleContext(pair: SgNode<Js>, arrayNode: SgNode<Js>): boolean {
+    const owner = arrayNode.parent();
+
+    if (owner && owner.is("pair")) {
+      const name = keyName(owner);
+
+      if (name === "rules" || name === "oneOf") {
+        return true;
+      }
+    }
+
+    return findConfigObjectFor(pair) !== null;
+  }
+
+  // Trivial html-loader rules are dropped (the `experiments.html: "auto"`
+  // default takes over); surviving rules get `type: "html"` and turn the
+  // default off, so `experiments.html: true` is added to their config.
+  transformRules(usePairs: SgNode<Js>[], loaderPairs: SgNode<Js>[]): void {
+    const migrations: RuleMigration[] = [];
+
+    for (const pair of usePairs) {
+      const originalValue = pair.field("value");
+
+      if (!originalValue) {
+        continue;
+      }
+
+      const value = unwrapFilterCall(originalValue);
+      const elements = value.is("array") ? namedChildren(value) : [value];
+
+      if (!elements.length) {
+        continue;
+      }
+
+      // Any other loader (template compilers, custom ones) stays in front.
+      const kept = elements.filter((element) => !this.isRemovableUseElement(element));
+
+      if (kept.length === elements.length) {
+        continue;
+      }
+
+      const ruleObject = pair.parent();
+
+      if (!ruleObject || !ruleObject.is("object")) {
+        continue;
+      }
+
+      if (!this.isWebpackRuleContext(pair, ruleObject.parent() ?? ruleObject)) {
+        continue;
+      }
+
+      const findings: LoaderFindings = {
+        supported: true,
+        sourceDefaults: false,
+        parserProps: [],
+        minification: [],
+      };
+
+      for (const element of elements) {
+        collectLoaderFindings(element, findings, this.typescript);
+      }
+
+      const trivial = pairsOf(ruleObject).every((rulePair) => {
+        const name = keyName(rulePair);
+
+        return name === "test" || name === "use";
+      });
+
+      migrations.push({
+        pair,
+        ruleObject,
+        kept,
+        filterSuffix: filterSuffixOf(originalValue, value),
+        findings,
+        trivial,
+        optionsPair: null,
+      });
+    }
+
+    // Rule-level `loader:`/`options:` shorthand.
+    for (const pair of loaderPairs) {
+      const ruleObject = pair.parent();
+
+      if (!ruleObject || !ruleObject.is("object")) {
+        continue;
+      }
+
+      if (!findPair(ruleObject, "test") || findPair(ruleObject, "use")) {
+        continue;
+      }
+
+      const value = pair.field("value");
+
+      if (!value || !this.isRemovableUseElement(value)) {
+        continue;
+      }
+
+      if (!this.isWebpackRuleContext(pair, ruleObject.parent() ?? ruleObject)) {
+        continue;
+      }
+
+      const findings: LoaderFindings = {
+        supported: true,
+        sourceDefaults: false,
+        parserProps: [],
+        minification: [],
+      };
+
+      collectLoaderFindings(ruleObject, findings, this.typescript);
+
+      const trivial = pairsOf(ruleObject).every((rulePair) => {
+        const name = keyName(rulePair);
+
+        return name === "test" || name === "loader" || name === "options";
+      });
+
+      migrations.push({
+        pair,
+        ruleObject,
+        kept: [],
+        filterSuffix: "",
+        findings,
+        trivial,
+        optionsPair: findPair(ruleObject, "options") ?? null,
+      });
+    }
+
+    // A retained html-loader emits JavaScript. Enabling native HTML or replacing
+    // an HTML plugin's template beside it would parse that JavaScript as HTML.
+    // Decide this before making edits to any of the owning config's rules.
+    for (const migration of migrations) {
+      if (this.canMigrateRule(migration)) {
+        continue;
+      }
+
+      const config = findConfigObjectFor(migration.pair);
+
+      if (config) {
+        this.blockedConfigs.add(config.range().start.index);
+      }
+    }
+
+    for (const migration of migrations) {
+      this.applyRuleMigration(migration);
+    }
+  }
+
+  private canMigrateRule(swap: RuleMigration): boolean {
+    if (!swap.findings.supported) {
+      return false;
+    }
+
+    const config = findConfigObjectFor(swap.pair);
+    const experiments = config && findPair(config, "experiments")?.field("value");
+    const parser = findPair(swap.ruleObject, "parser")?.field("value");
+
+    if (
+      (experiments && !experiments.is("object")) ||
+      (swap.findings.parserProps.length && parser && !parser.is("object"))
+    ) {
+      return false;
+    }
+
+    // Do not replace loader behavior with a conflicting existing parser option,
+    // or flatten differently configured loader branches into one parser.
+    for (const prop of swap.findings.parserProps) {
+      const existing = parser?.is("object")
+        ? findPair(parser, prop.name)?.field("value")
+        : undefined;
+      const replacement = parseExpression(prop.valueText);
+
+      if (existing && !sameSyntax(existing, replacement)) {
+        return false;
+      }
+
+      if (
+        swap.findings.parserProps.some(
+          (other) =>
+            other.name === prop.name && !sameSyntax(parseExpression(other.valueText), replacement),
+        )
+      ) {
+        return false;
+      }
+    }
+
+    return (
+      !swap.findings.sourceDefaults || (!!config && this.plans.canNormalizeSourceDefaults(config))
+    );
+  }
+
+  private applyRuleMigration(swap: RuleMigration): void {
+    if (!this.canMigrateRule(swap)) {
+      return;
+    }
+
+    const config = findConfigObjectFor(swap.pair);
+
+    if (config && this.blockedConfigs.has(config.range().start.index)) {
+      return;
+    }
+
+    const experiments = config && findPair(config, "experiments")?.field("value");
+    const parser = findPair(swap.ruleObject, "parser")?.field("value");
+
+    swap.findings.parserProps = dedupeProps(swap.findings.parserProps);
+
+    if (swap.findings.sourceDefaults && config) {
+      this.plans.planFor(config).sourceDefaults = true;
+    }
+
+    if (config) {
+      this.plans
+        .planFor(config)
+        .minification.push(
+          ...(swap.findings.minification.length
+            ? swap.findings.minification
+            : [{ html: null, lost: [] }]),
+        );
+    }
+
+    const survives =
+      !swap.trivial ||
+      !isDefaultHtmlTest(findPair(swap.ruleObject, "test")?.field("value")) ||
+      swap.kept.length > 0 ||
+      swap.findings.parserProps.length > 0;
+
+    if (!survives) {
+      // Explicitly disabled HTML must be enabled even when its loader rule goes.
+      if (config && experiments && findPair(experiments, "html")) {
+        this.plans.requireExperimentsHtml(this.plans.planFor(config));
+      }
+
+      this.editor.markForRemoval(cascadeRemovalTarget(swap.ruleObject));
+
+      return;
+    }
+
+    const indent = lineIndent(this.editor.source, swap.pair.range().start.index);
+    const multiline = swap.ruleObject.range().start.line !== swap.ruleObject.range().end.line;
+    const separator = multiline ? `,\n${indent}` : ", ";
+    let replacement = "";
+
+    if (swap.kept.length) {
+      // Guarded entries keep the original `.filter(...)` for their falsy branch.
+      const keptTexts = swap.kept.map((loader) => loader.text());
+      const keepsGuard = swap.kept.some((loader) => guardBranchesOf(loader) !== null);
+      const filterSuffix = keepsGuard ? swap.filterSuffix || ".filter(Boolean)" : "";
+
+      replacement += `use: [${keptTexts.join(", ")}]${filterSuffix}${separator}`;
+    }
+
+    const typePair = findPair(swap.ruleObject, "type");
+
+    replacement += `type: "html"`;
+
+    if (typePair) {
+      this.editor.markForRemoval(typePair);
+    }
+
+    if (swap.findings.parserProps.length) {
+      if (parser?.is("object")) {
+        const missing = swap.findings.parserProps.filter((prop) => !findPair(parser, prop.name));
+
+        if (missing.length) {
+          this.editor.insertIntoObject(parser, () =>
+            missing.map((prop) => `${prop.name}: ${prop.valueText}`),
+          );
+        }
+      } else if (!parser) {
+        const texts = swap.findings.parserProps.map((prop) => `${prop.name}: ${prop.valueText}`);
+
+        replacement += `${separator}parser: { ${texts.join(", ")} }`;
+      }
+    }
+
+    this.editor.replace(swap.pair, replacement);
+
+    if (swap.optionsPair) {
+      this.editor.markForRemoval(swap.optionsPair);
+    }
+
+    // A surviving rule that matches `.html` turns the "auto" default off.
+    if (!ruleMatchesFiles(swap.ruleObject, HTML_SAMPLE_FILES)) {
+      return;
+    }
+
+    if (config) {
+      this.plans.requireExperimentsHtml(this.plans.planFor(config));
+    }
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/src/loaders/sources.ts b/codemods/html-plugins-to-native-html/src/loaders/sources.ts
new file mode 100644
index 0000000..9cd289b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/loaders/sources.ts
@@ -0,0 +1,257 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import { findPair, keyName, namedChildren, staticString, unquote } from "@webpack/codemod-utils";
+import { callbackParameters, constantBoolean, usesParameter } from "./callbacks";
+
+function freshName(identifiers: Set<string>, base: string): string {
+  while (identifiers.has(base)) {
+    base += "_";
+  }
+
+  return base;
+}
+
+// Source filters run per attribute in both APIs, but native attributes are a
+// Map and the native callback has no tag name or resource path arguments.
+function sourceFilter(
+  value: SgNode<Js>,
+  tag: string | null,
+  attribute: string,
+  attrs: string,
+  typescript: boolean,
+): string | null {
+  const params = callbackParameters(value);
+
+  if (!params || params.length > 4 || usesParameter(value, params, 3)) {
+    return null;
+  }
+
+  if ((!tag || tag === "*") && usesParameter(value, params, 0)) {
+    return null;
+  }
+
+  // parse5's foreign attribute namespace metadata is not exposed by native HTML.
+  const metadataAccesses = value.findAll({
+    rule: {
+      any: [
+        { kind: "property_identifier" },
+        { kind: "shorthand_property_identifier_pattern" },
+        { kind: "string" },
+        { kind: "template_string" },
+        { kind: "binary_expression" },
+        { kind: "subscript_expression" },
+      ],
+    },
+  });
+
+  if (
+    usesParameter(value, params, 2) &&
+    metadataAccesses.some((node) => {
+      if (node.is("subscript_expression")) {
+        const index = node.field("index");
+        const name = staticString(index);
+
+        return name === "namespace" || name === "prefix" || (name === null && !index.is("number"));
+      }
+
+      const name =
+        node.is("property_identifier") || node.is("shorthand_property_identifier_pattern")
+          ? node.text()
+          : staticString(node);
+
+      return name === "namespace" || name === "prefix";
+    })
+  ) {
+    return null;
+  }
+
+  const args = [
+    JSON.stringify(tag ?? ""),
+    JSON.stringify(attribute),
+    `Array.from(${attrs}, ([name, value]) => ({ name, value }))`,
+    typescript ? "undefined as never" : "undefined",
+  ];
+
+  return `(${value.text()})(${args.slice(0, params.length).join(", ")})`;
+}
+
+export function nativeSources(
+  value: SgNode<Js>,
+  typescript = false,
+): { text: string; extendsDefaults: boolean } | null {
+  if (value.is("true") || value.is("false")) {
+    return { text: value.text(), extendsDefaults: false };
+  }
+
+  if (!value.is("object")) {
+    return null;
+  }
+
+  const options = namedChildren(value).filter((node) => !node.is("comment"));
+
+  if (!options.length) {
+    return { text: "true", extendsDefaults: false };
+  }
+
+  const keys = options.map(keyName);
+
+  if (
+    new Set(keys).size !== keys.length ||
+    keys.some((key) => !key || !["list", "urlFilter", "scriptingEnabled"].includes(key))
+  ) {
+    return null;
+  }
+
+  const scripting = findPair(value, "scriptingEnabled")?.field("value");
+
+  if (scripting && !scripting.is("true")) {
+    return null;
+  }
+
+  const urlFilter = findPair(value, "urlFilter")?.field("value");
+  const urlConstant = urlFilter ? constantBoolean(urlFilter) : "true";
+
+  if (urlConstant === "false") {
+    return { text: "false", extendsDefaults: false };
+  }
+
+  const list = findPair(value, "list")?.field("value");
+
+  if (!list) {
+    return urlConstant === "true" ? { text: "true", extendsDefaults: false } : null;
+  }
+
+  if (!list.is("array")) {
+    return null;
+  }
+
+  const urlParams = urlFilter ? callbackParameters(urlFilter) : [];
+
+  if (
+    urlConstant === null &&
+    (!urlParams || urlParams.length > 3 || usesParameter(urlFilter!, urlParams, 2))
+  ) {
+    return null;
+  }
+
+  const edits = [];
+  const identifiers = new Set(
+    value
+      .findAll({
+        rule: { any: [{ kind: "identifier" }, { kind: "shorthand_property_identifier" }] },
+      })
+      .map((node) => node.text()),
+  );
+
+  for (const source of namedChildren(list)) {
+    if (source.is("comment")) {
+      continue;
+    }
+
+    if (source.is("string") && unquote(source.text()) === "...") {
+      if (urlConstant === null) {
+        return null;
+      }
+
+      continue;
+    }
+
+    if (!source.is("object")) {
+      return null;
+    }
+
+    const properties = namedChildren(source).filter((node) => !node.is("comment"));
+    const names = properties.map(keyName);
+
+    if (new Set(names).size !== names.length) {
+      return null;
+    }
+
+    if (!findPair(source, "attribute") || !findPair(source, "type")) {
+      return null;
+    }
+
+    for (const property of properties) {
+      const name = keyName(property);
+      const option = property.field("value");
+
+      if (!name || !["tag", "attribute", "type", "filter"].includes(name) || !option) {
+        return null;
+      }
+
+      if (name === "filter") {
+        continue;
+      }
+
+      if (name === "type") {
+        if (!option.is("string") || !["src", "srcset"].includes(unquote(option.text()))) {
+          return null;
+        }
+      } else if (!option.is("string")) {
+        return null;
+      }
+    }
+
+    const filter = findPair(source, "filter")?.field("value");
+
+    if (!filter && urlConstant === "true") {
+      continue;
+    }
+
+    const tagNode = findPair(source, "tag")?.field("value");
+    const tag = tagNode ? unquote(tagNode.text()).toLowerCase() : null;
+    const attribute = unquote(findPair(source, "attribute")!.field("value")!.text()).toLowerCase();
+    const type = findPair(source, "type")!.field("value")!;
+
+    // urlFilter sees each parsed srcset candidate, while a native source filter
+    // sees the entire attribute. Do not turn a per-URL decision into all-or-none.
+    if (urlConstant === null && unquote(type.text()) !== "src") {
+      return null;
+    }
+
+    const attrs = freshName(identifiers, "htmlAttributes");
+    const url = freshName(identifiers, "htmlUrl");
+    const conditions: string[] = [];
+
+    if (filter) {
+      const condition = sourceFilter(filter, tag, attribute, attrs, typescript);
+
+      if (condition === null) {
+        return null;
+      }
+
+      conditions.push(condition);
+    }
+
+    if (urlFilter && urlConstant === null) {
+      const normalized = `${url}.replace(/^[\\t\\n\\f\\r ]+|[\\t\\n\\f\\r ]+$/g, "").replace(/^[\\u0001-\\u0019\\u00a0]+|[\\u0001-\\u0019\\u00a0]+$/g, "")`;
+      const args = [
+        JSON.stringify(attribute),
+        normalized,
+        typescript ? "undefined as never" : "undefined",
+      ];
+
+      conditions.push(`(${urlFilter.text()})(${args.slice(0, urlParams!.length).join(", ")})`);
+    }
+
+    const parameters =
+      urlConstant === null
+        ? `${attrs}${typescript ? ": Map<string, string>" : ""}, ${url}${
+            typescript ? ": string" : ""
+          }`
+        : `${attrs}${typescript ? ": Map<string, string>" : ""}`;
+    const mapped = properties
+      .filter((property) => keyName(property) !== "filter")
+      .map((property) => property.text());
+
+    mapped.push(`filter: (${parameters}) => ${conditions.join(" && ")}`);
+    edits.push(source.replace(`{ ${mapped.join(", ")} }`));
+  }
+
+  return {
+    text: edits.length ? list.commitEdits(edits) : list.text(),
+    extendsDefaults: namedChildren(list).some(
+      (node) => node.is("string") && unquote(node.text()) === "...",
+    ),
+  };
+}
diff --git a/codemods/html-plugins-to-native-html/src/loaders/template.ts b/codemods/html-plugins-to-native-html/src/loaders/template.ts
new file mode 100644
index 0000000..0f37d69
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/loaders/template.ts
@@ -0,0 +1,279 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import { namedChildren } from "@webpack/codemod-utils";
+import { callbackParameters } from "./callbacks";
+
+const STRING_METHODS = new Set([
+  "concat",
+  "normalize",
+  "padEnd",
+  "padStart",
+  "repeat",
+  "replace",
+  "replaceAll",
+  "slice",
+  "substring",
+  "toLowerCase",
+  "toUpperCase",
+  "trim",
+  "trimEnd",
+  "trimStart",
+]);
+
+const CONTEXT_METHODS = new Map([
+  ["addDependency", "(dependency: string) => void"],
+  ["addContextDependency", "(dependency: string) => void"],
+  ["addMissingDependency", "(dependency: string) => void"],
+  ["addBuildDependency", "(dependency: string) => void"],
+  ["emitWarning", "(warning: Error) => void"],
+  ["emitError", "(error: Error) => void"],
+]);
+
+const STRING_CONTEXT_PROPERTIES = new Set([
+  "resource",
+  "resourcePath",
+  "resourceQuery",
+  "resourceFragment",
+  "context",
+]);
+
+function adaptTemplateContext(
+  value: SgNode<Js>,
+  context: SgNode<Js>,
+  typescript: boolean,
+): string | null {
+  const body = value.field("body")!;
+  const edits = [];
+  const properties = new Map<string, string>();
+  const name = context.text();
+  const resourcePattern = "/^((?:\\0.|[^?#\\0])*)(\\?(?:\\0.|[^#\\0])*)?(#.*)?$/";
+
+  for (const reference of body
+    .findAll({ rule: { kind: "identifier" } })
+    .filter((node) => node.text() === name)) {
+    const member = reference.parent();
+
+    if (
+      !member?.is("member_expression") ||
+      member.field("object")?.range().start.index !== reference.range().start.index
+    ) {
+      return null;
+    }
+
+    const property = member.field("property")?.text();
+
+    if (!property) {
+      return null;
+    }
+
+    if (CONTEXT_METHODS.has(property)) {
+      properties.set(property, CONTEXT_METHODS.get(property)!);
+    } else if (property === "context") {
+      properties.set("module", "{ context: string }");
+      edits.push(member.replace(`${name}.module.context`));
+    } else if (
+      ["resource", "resourcePath", "resourceQuery", "resourceFragment"].includes(property)
+    ) {
+      properties.set("resource", "string");
+
+      if (property === "resourcePath") {
+        edits.push(
+          member.replace(
+            `${name}.resource.replace(${resourcePattern}, "$1").replace(/\\0(.)/g, "$1")`,
+          ),
+        );
+      } else if (property === "resourceQuery") {
+        edits.push(
+          member.replace(
+            `(${name}.resource.match(${resourcePattern})?.[2]?.replace(/\\0(.)/g, "$1") ?? "")`,
+          ),
+        );
+      } else if (property === "resourceFragment") {
+        edits.push(member.replace(`(${name}.resource.match(${resourcePattern})?.[3] ?? "")`));
+      }
+    } else {
+      return null;
+    }
+  }
+
+  if (typescript) {
+    const parameter = namedChildren(value.field("parameters")!).filter(
+      (node) => !node.is("comment"),
+    )[1];
+    const type = parameter.field("type");
+    const text = `: { ${[...properties].map(([key, type]) => `${key}: ${type}`).join("; ")} }`;
+
+    if (type) {
+      edits.push(type.replace(text));
+    } else {
+      edits.push({
+        startPos: context.range().end.index,
+        endPos: context.range().end.index,
+        insertedText: text,
+      });
+    }
+  }
+
+  return edits.length ? value.commitEdits(edits) : value.text();
+}
+
+function returnsString(node: SgNode<Js> | null, strings: Set<string>, context?: string): boolean {
+  if (!node) {
+    return false;
+  }
+
+  if (node.is("string") || node.is("template_string")) {
+    return true;
+  }
+
+  if (node.is("identifier")) {
+    return strings.has(node.text());
+  }
+
+  if (node.is("member_expression")) {
+    const object = node.field("object");
+    const property = node.field("property");
+
+    return (
+      !!object?.is("identifier") &&
+      object.text() === context &&
+      STRING_CONTEXT_PROPERTIES.has(property?.text() ?? "")
+    );
+  }
+
+  if (node.is("parenthesized_expression")) {
+    return returnsString(namedChildren(node)[0], strings, context);
+  }
+
+  if (node.is("binary_expression") && node.field("operator")?.is("+")) {
+    return (
+      returnsString(node.field("left"), strings, context) ||
+      returnsString(node.field("right"), strings, context)
+    );
+  }
+
+  if (node.is("ternary_expression")) {
+    return (
+      returnsString(node.field("consequence"), strings, context) &&
+      returnsString(node.field("alternative"), strings, context)
+    );
+  }
+
+  if (node.is("call_expression")) {
+    const callee: SgNode<Js> = node.field("function");
+
+    return (
+      callee?.is("member_expression") &&
+      STRING_METHODS.has(callee.field("property")?.text() ?? "") &&
+      returnsString(callee.field("object"), strings, context)
+    );
+  }
+
+  return false;
+}
+
+// Native templates must synchronously return a string. Limit automatic migration
+// to inline string transforms whose result we can establish without executing
+// user code. Unsupported context APIs and async/unknown returns need adaptation.
+export function nativeTemplate(value: SgNode<Js>, typescript = false): string | null {
+  if (!["arrow_function", "function_expression"].some((kind) => value.is(kind))) {
+    return null;
+  }
+
+  if (value.children().some((node) => node.is("async"))) {
+    return null;
+  }
+
+  if (
+    value.findAll({
+      rule: {
+        any: [
+          { kind: "await_expression" },
+          { kind: "this" },
+          { kind: "assignment_expression" },
+          { kind: "augmented_assignment_expression" },
+          { kind: "update_expression" },
+          { pattern: "arguments" },
+        ],
+      },
+    }).length
+  ) {
+    return null;
+  }
+
+  const params = callbackParameters(value);
+
+  if (!params || params.length > 2) {
+    return null;
+  }
+
+  const name = params[0];
+  const context = params[1];
+  const text = context ? adaptTemplateContext(value, context, typescript) : value.text();
+
+  if (text === null) {
+    return null;
+  }
+
+  const strings = new Set(name ? [name.text()] : []);
+
+  const body = value.field("body");
+
+  if (!body) {
+    return null;
+  }
+
+  if (!body.is("statement_block")) {
+    return returnsString(body, strings, context?.text()) ? text : null;
+  }
+
+  const statements = namedChildren(body).filter((node) => !node.is("comment"));
+  const last = statements.pop();
+
+  if (!last?.is("return_statement")) {
+    return null;
+  }
+
+  for (const statement of statements) {
+    const expression = statement.is("expression_statement")
+      ? namedChildren(statement)[0]
+      : undefined;
+    const callee: SgNode<Js> | undefined = expression?.is("call_expression")
+      ? expression.field("function")
+      : undefined;
+
+    if (
+      context &&
+      callee?.is("member_expression") &&
+      callee.field("object")?.text() === context.text() &&
+      CONTEXT_METHODS.has(callee.field("property")?.text() ?? "")
+    ) {
+      continue;
+    }
+
+    if (!statement.is("lexical_declaration") || !statement.field("kind")?.is("const")) {
+      return null;
+    }
+
+    for (const declaration of namedChildren(statement).filter((node) => !node.is("comment"))) {
+      const binding = declaration.field("name");
+
+      if (
+        !binding?.is("identifier") ||
+        !returnsString(declaration.field("value"), strings, context?.text())
+      ) {
+        return null;
+      }
+
+      strings.add(binding.text());
+    }
+  }
+
+  return returnsString(
+    namedChildren(last).find((node) => !node.is("comment")) ?? null,
+    strings,
+    context?.text(),
+  )
+    ? text
+    : null;
+}
diff --git a/codemods/html-plugins-to-native-html/src/migration-state.ts b/codemods/html-plugins-to-native-html/src/migration-state.ts
new file mode 100644
index 0000000..fcd9d47
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/migration-state.ts
@@ -0,0 +1,127 @@
+import type {} from "@codemod.com/jssg-types/workflow";
+import { acquireLock, getState, setState } from "codemod:workflow";
+
+const SOURCES_KEY = "webpack-native-html:sources";
+const TEMPLATES_KEY = "webpack-native-html:templates";
+
+export interface TemplateScript {
+  src: string;
+  chunkName?: string;
+}
+
+// Use one spelling for filenames from the JS, HTML and JSON parsers, including
+// Windows filenames. Resolving these paths never opens or writes a file.
+export function normalizeFilename(filename: string): string {
+  const segments: string[] = [];
+
+  for (const part of filename
+    .replace(/^\\\\\?\\/, "")
+    .replace(/\\/g, "/")
+    .split("/")) {
+    if (part === ".") {
+      continue;
+    }
+
+    if (part === ".." && segments.length && segments.at(-1) !== "..") {
+      segments.pop();
+    } else {
+      segments.push(part);
+    }
+  }
+
+  return segments.join("/");
+}
+
+export function directoryOf(filename: string): string {
+  const normalized = normalizeFilename(filename);
+  const slash = normalized.lastIndexOf("/");
+
+  return slash < 0 ? "." : normalized.slice(0, slash);
+}
+
+export function recordSource(filename: string, references: string[]): void {
+  const release = acquireLock(SOURCES_KEY);
+
+  try {
+    const sources = getState<Record<string, string[]>>(SOURCES_KEY) ?? {};
+
+    sources[normalizeFilename(filename)] = references;
+    setState(SOURCES_KEY, sources);
+  } finally {
+    release();
+  }
+}
+
+export function remainingPackages(manifestFilename: string): Set<string> | null {
+  const sources = getState<Record<string, string[]>>(SOURCES_KEY);
+
+  // Running the JSON transform alone provides no evidence for safe removal.
+  if (!sources) {
+    return null;
+  }
+
+  const directory = directoryOf(manifestFilename);
+  const remaining = new Set<string>();
+
+  for (const [filename, packages] of Object.entries(sources)) {
+    if (directory !== "." && !filename.startsWith(`${directory}/`)) {
+      continue;
+    }
+
+    for (const name of packages) {
+      remaining.add(name);
+    }
+  }
+
+  return remaining;
+}
+
+export function queueTemplate(
+  configFilename: string,
+  template: string,
+  entry: string,
+  chunkName: string,
+): string | null {
+  if (!template.startsWith(".") || !entry.startsWith(".")) {
+    return null;
+  }
+
+  const directory = directoryOf(configFilename);
+  const templateFilename = normalizeFilename(`${directory}/${template}`);
+  const entryFilename = normalizeFilename(`${directory}/${entry}`);
+  const from = directoryOf(templateFilename).split("/");
+  const to = entryFilename.split("/");
+  let common = 0;
+
+  while (common < from.length && common < to.length - 1 && from[common] === to[common]) {
+    common += 1;
+  }
+
+  const up = from.length - common;
+  const script = `${up ? "../".repeat(up) : "./"}${to.slice(common).join("/")}`;
+  const release = acquireLock(TEMPLATES_KEY);
+
+  try {
+    const templates = getState<Record<string, TemplateScript[]>>(TEMPLATES_KEY) ?? {};
+    const scripts = templates[templateFilename] ?? [];
+
+    if (!scripts.some((item) => item.src === script && item.chunkName === chunkName)) {
+      scripts.push({ src: script, chunkName });
+    }
+
+    templates[templateFilename] = scripts.sort(
+      (a, b) => a.src.localeCompare(b.src) || (a.chunkName ?? "").localeCompare(b.chunkName ?? ""),
+    );
+    setState(TEMPLATES_KEY, templates);
+  } finally {
+    release();
+  }
+
+  return script;
+}
+
+export function scriptsForTemplate(filename: string): TemplateScript[] {
+  return (
+    getState<Record<string, TemplateScript[]>>(TEMPLATES_KEY)?.[normalizeFilename(filename)] ?? []
+  );
+}
diff --git a/codemods/html-plugins-to-native-html/src/minification.ts b/codemods/html-plugins-to-native-html/src/minification.ts
new file mode 100644
index 0000000..df97140
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/minification.ts
@@ -0,0 +1,215 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import { ConfigEditor, findPair, keyName, namedChildren, unquote } from "@webpack/codemod-utils";
+
+export interface Minification {
+  // null uses webpack's production default; false disables only HTML.
+  html: string | null;
+  lost: string[];
+}
+
+const BOOLEAN_OPTIONS = new Set([
+  "collapseBooleanAttributes",
+  "collapseWhitespace",
+  "minifyConditionalComments",
+  "removeEmptyAttributes",
+  "removeEmptyElements",
+  "removeRedundantAttributes",
+  "sortAttributes",
+]);
+
+// html-minifier-terser and webpack do not accept the same option object.
+// Only translate known literal values; retain a review note for everything else.
+export function collectMinification(
+  value: SgNode<Js> | null | undefined,
+  name: string,
+): Minification {
+  const result: Minification = { html: null, lost: [] };
+
+  if (!value || value.is("true") || (value.is("string") && unquote(value.text()) === "auto")) {
+    return result;
+  }
+
+  if (value.is("false")) {
+    return { html: "false", lost: [] };
+  }
+
+  if (!value.is("object")) {
+    result.lost.push(`${name} (configure optimization.minimizeOptions.html)`);
+
+    return result;
+  }
+
+  const props = new Map<string, string>();
+  const removeComments = findPair(value, "removeComments")?.field("value");
+  const ignoredComments = findPair(value, "ignoreCustomComments")?.field("value");
+
+  for (const child of namedChildren(value)) {
+    if (child.is("comment")) {
+      continue;
+    }
+
+    const key = keyName(child);
+    const option = child.field("value");
+
+    if (key === "ignoreCustomComments" && option) {
+      if (removeComments?.is("false")) {
+        continue;
+      }
+
+      const patterns = option.is("array")
+        ? namedChildren(option).filter((node) => !node.is("comment"))
+        : null;
+
+      if (!patterns || patterns.some((node) => !node.is("regex"))) {
+        result.lost.push(`${name}.${key} (configure optimization.minimizeOptions.html.comments)`);
+      }
+
+      continue;
+    }
+
+    if (!key || !option || (!option.is("true") && !option.is("false"))) {
+      result.lost.push(`${name}.${key ?? "options"} (configure optimization.minimizeOptions.html)`);
+
+      continue;
+    }
+
+    const enabled = option.is("true");
+
+    if (BOOLEAN_OPTIONS.has(key)) {
+      props.set(key, option.text());
+    } else if (key === "removeComments") {
+      props.set("comments", enabled ? "false" : "true");
+
+      // Keeping a comment in the HTML also means not moving it to LICENSE.txt.
+      if (!enabled) {
+        props.set("extractComments", "false");
+      }
+    } else if (key === "removeAttributeQuotes") {
+      props.set("normalizeAttributeQuotes", option.text());
+    } else if (key === "removeOptionalTags") {
+      props.set("removeOptionalTags", option.text());
+      props.set("removeImpliedTags", option.text());
+    } else if (key === "conservativeCollapse") {
+      // Applied below after collapseWhitespace so source key order is irrelevant.
+    } else {
+      result.lost.push(`${name}.${key} (configure optimization.minimizeOptions.html)`);
+    }
+  }
+
+  if (
+    props.get("collapseWhitespace") === "true" &&
+    findPair(value, "conservativeCollapse")?.field("value")?.is("false")
+  ) {
+    props.set("collapseWhitespace", '"all"');
+  }
+
+  if (ignoredComments?.is("array") && removeComments?.is("true")) {
+    const patterns = namedChildren(ignoredComments).filter((node) => !node.is("comment"));
+
+    if (patterns.every((node) => node.is("regex"))) {
+      const parameter = /\.[cm]?tsx?$/.test(value.getRoot().filename())
+        ? "comment: string"
+        : "comment";
+
+      props.set(
+        "comments",
+        patterns.length
+          ? `(${parameter}) => [${patterns
+              .map((node) => node.text())
+              .join(", ")}].some((pattern) => pattern.test(comment))`
+          : "false",
+      );
+      props.set("extractComments", "false");
+    }
+  }
+
+  if (props.size) {
+    result.html = `{ ${[...props].map(([key, text]) => `${key}: ${text}`).join(", ")} }`;
+  }
+
+  return result;
+}
+
+// Keep the build's mode and minimize switch: using `minimize: { html: ... }`
+// would also turn JavaScript/CSS minimization on in development.
+export function planMinification(
+  editor: ConfigEditor,
+  config: SgNode<Js>,
+  requests: Minification[],
+  notes: string[],
+): string | null {
+  if (!requests.length) {
+    return null;
+  }
+
+  const values = new Set(requests.map((request) => request.html ?? "{}"));
+  let html = requests.find((request) => request.html !== null)?.html ?? null;
+
+  if (values.size > 1) {
+    notes.push(
+      "Review: HTML minification differs between pages or loaders; configure optimization.minimizeOptions.html for the whole compilation",
+    );
+    html = null;
+  }
+
+  const optimization = findPair(config, "optimization")?.field("value");
+
+  if (!optimization) {
+    return html === null ? null : `optimization: { minimizeOptions: { html: ${html} } }`;
+  }
+
+  if (!optimization.is("object")) {
+    notes.push(
+      'Review: configure the existing optimization value to use webpack\'s native HTML minimizer (minimizeOptions.html and minimizer: ["..."])',
+    );
+
+    return null;
+  }
+
+  const minimizer = findPair(optimization, "minimizer")?.field("value");
+
+  if (minimizer?.is("array") && html !== "false") {
+    const elements = namedChildren(minimizer).filter((element) => !element.is("comment"));
+
+    if (!elements.some((element) => element.is("string") && unquote(element.text()) === "...")) {
+      // Append after custom minimizers, so assets they marked minimized stay so.
+      const end = elements.at(-1)?.range().end.index ?? minimizer.range().start.index + 1;
+
+      editor.addEdit({
+        startPos: end,
+        endPos: end,
+        insertedText: `${elements.length ? "," : ""} "..."`,
+      });
+    }
+  } else if (minimizer && !minimizer.is("array")) {
+    notes.push('Review: keep "..." in optimization.minimizer to enable native HTML minification');
+  }
+
+  if (html === null) {
+    return null;
+  }
+
+  const minimize = findPair(optimization, "minimize")?.field("value");
+  const separateOptions = findPair(optimization, "minimizeOptions")?.field("value");
+  // The shorthand takes precedence during webpack normalization.
+  const options = minimize?.is("object") ? minimize : separateOptions;
+
+  if (options?.is("object")) {
+    if (!findPair(options, "html")) {
+      editor.insertIntoObject(options, () => [`html: ${html}`]);
+    } else {
+      notes.push(
+        "Review: existing native HTML minification options take precedence over migrated minify/minimize options",
+      );
+    }
+  } else if (options) {
+    notes.push(
+      "Review: merge the HTML minification options into the existing optimization.minimizeOptions value",
+    );
+  } else {
+    editor.insertIntoObject(optimization, () => [`minimizeOptions: { html: ${html} }`]);
+  }
+
+  return null;
+}
diff --git a/codemods/html-plugins-to-native-html/src/package-references.ts b/codemods/html-plugins-to-native-html/src/package-references.ts
new file mode 100644
index 0000000..80a4525
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/package-references.ts
@@ -0,0 +1,122 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import { namedChildren, staticString } from "@webpack/codemod-utils";
+
+export const HTML_PACKAGES = [
+  "html-webpack-plugin",
+  "html-loader",
+  "csp-html-webpack-plugin",
+  "webpack-subresource-integrity",
+  "favicons-webpack-plugin",
+];
+
+// These are module request values, not snippets of JavaScript. Account for
+// webpack's inline loader chains, queries, and package subpaths.
+export function packagesInRequest(request: string): string[] {
+  const result = new Set<string>();
+
+  for (const part of request.split("!")) {
+    const path = part.split("?", 1)[0].split("#", 1)[0].replaceAll("\\", "/");
+    const segments = path.split("/");
+    const installed = segments.lastIndexOf("node_modules");
+    const packagePath = installed < 0 ? path : segments.slice(installed + 1).join("/");
+
+    for (const name of HTML_PACKAGES) {
+      if (packagePath === name || packagePath.startsWith(`${name}/`)) {
+        result.add(name);
+      }
+    }
+  }
+
+  return [...result];
+}
+
+function isModuleCall(node: SgNode<Js>): boolean {
+  const callee = node.field("function");
+
+  if (!callee) {
+    return false;
+  }
+
+  if (callee.is("import") || (callee.is("identifier") && callee.text() === "require")) {
+    return true;
+  }
+
+  if (!callee.is("member_expression") || callee.field("property")?.text() !== "resolve") {
+    return false;
+  }
+
+  const object = callee.field("object");
+
+  return (
+    !!object &&
+    (object.is("meta_property") || (object.is("identifier") && object.text() === "require"))
+  );
+}
+
+function hasSyntaxError(node: SgNode<Js>): boolean {
+  return node.is("ERROR") || node.children().some(hasSyntaxError);
+}
+
+export function sourcePackageReferences(root: SgNode<Js>): string[] {
+  const references = new Set<string>();
+
+  // An incomplete AST cannot establish that a package has become unused.
+  if (hasSyntaxError(root)) {
+    return [...HTML_PACKAGES];
+  }
+
+  // Literal module requests also appear in loader options and variables passed
+  // to tooling. Comments and arbitrary surrounding source never count.
+  for (const node of root.findAll({
+    rule: { any: [{ kind: "string" }, { kind: "template_string" }, { kind: "binary_expression" }] },
+  })) {
+    const request = staticString(node);
+
+    if (request === null) {
+      continue;
+    }
+
+    for (const name of packagesInRequest(request)) {
+      references.add(name);
+    }
+  }
+
+  for (const call of root.findAll({ rule: { kind: "call_expression" } })) {
+    if (!isModuleCall(call)) {
+      continue;
+    }
+
+    const args = call.field("arguments");
+    const first = args && namedChildren(args).find((node) => !node.is("comment"));
+
+    // Dynamic imports/resolvers need manual dependency review. Do not remove a
+    // package merely because its name is assembled outside this file.
+    if (!first || staticString(first) === null) {
+      return [...HTML_PACKAGES];
+    }
+  }
+
+  return [...references];
+}
+
+export function manifestPackageReferences(value: SgNode<Js>, shellScripts: boolean): string[] {
+  const references = new Set<string>();
+
+  for (const node of value.findAll({ rule: { kind: "string" } })) {
+    // This node comes from the JSON parser. JSON.parse only decodes its literal
+    // value; it cannot execute scripts embedded in package.json.
+    const text = JSON.parse(node.text()) as string;
+    // npm scripts contain shell commands rather than JavaScript AST nodes.
+    // Keep their decoded contents conservative, including embedded node -e/-p.
+    const packages = shellScripts
+      ? HTML_PACKAGES.filter((name) => text.includes(name))
+      : packagesInRequest(text);
+
+    for (const name of packages) {
+      references.add(name);
+    }
+  }
+
+  return [...references];
+}
diff --git a/codemods/html-plugins-to-native-html/src/plugins/bindings.ts b/codemods/html-plugins-to-native-html/src/plugins/bindings.ts
new file mode 100644
index 0000000..9378143
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/plugins/bindings.ts
@@ -0,0 +1,93 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import { type ModuleBinding, namedChildren, unquote } from "@webpack/codemod-utils";
+
+export const PLUGIN_MODULE = "html-webpack-plugin";
+
+export function isRequireOf(node: SgNode<Js>, moduleName: string): boolean {
+  if (!node.is("call_expression")) {
+    return false;
+  }
+
+  const callee = node.field("function");
+
+  if (!callee || !callee.is("identifier") || callee.text() !== "require") {
+    return false;
+  }
+
+  const argumentsNode = node.field("arguments");
+  const args = argumentsNode ? namedChildren(argumentsNode) : [];
+
+  return args.length === 1 && args[0].is("string") && unquote(args[0].text()) === moduleName;
+}
+
+// Named bindings (`import { X }` / `const { X } = require(...)`) — e.g.
+// webpack-subresource-integrity's named export, which the default-import
+// resolution doesn't cover. Only single-name patterns, so removing the
+// statement can never drop another binding.
+export function collectNamedBindings(rootNode: SgNode<Js>, moduleName: string): ModuleBinding[] {
+  const bindings: ModuleBinding[] = [];
+
+  for (const statement of rootNode.findAll({ rule: { kind: "import_statement" } })) {
+    const source = statement.field("source");
+
+    if (!source || unquote(source.text()) !== moduleName) {
+      continue;
+    }
+
+    const specifiers = statement.findAll({ rule: { kind: "import_specifier" } });
+
+    if (specifiers.length !== 1) {
+      continue;
+    }
+
+    const local = specifiers[0].field("alias") ?? specifiers[0].field("name");
+
+    if (local) {
+      bindings.push({ name: local.text(), statement });
+    }
+  }
+
+  for (const kind of ["lexical_declaration", "variable_declaration"] as const) {
+    for (const statement of rootNode.findAll({ rule: { kind } })) {
+      const declarators = namedChildren(statement).filter((child) =>
+        child.is("variable_declarator"),
+      );
+
+      if (declarators.length !== 1) {
+        continue;
+      }
+
+      const pattern = declarators[0].field("name");
+      const valueNode = declarators[0].field("value");
+
+      if (!pattern || !pattern.is("object_pattern")) {
+        continue;
+      }
+
+      if (!valueNode || !isRequireOf(valueNode, moduleName)) {
+        continue;
+      }
+
+      const properties = namedChildren(pattern);
+
+      if (properties.length !== 1) {
+        continue;
+      }
+
+      const property = properties[0];
+
+      if (property.is("shorthand_property_identifier_pattern")) {
+        bindings.push({ name: property.text(), statement });
+      } else if (property.is("pair_pattern")) {
+        const local = property.field("value");
+
+        if (local) {
+          bindings.push({ name: local.text(), statement });
+        }
+      }
+    }
+  }
+
+  return bindings;
+}
diff --git a/codemods/html-plugins-to-native-html/src/plugins/companions.ts b/codemods/html-plugins-to-native-html/src/plugins/companions.ts
new file mode 100644
index 0000000..ef8da72
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/plugins/companions.ts
@@ -0,0 +1,285 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import {
+  ConfigEditor,
+  type ModuleBinding,
+  collectModuleBindings,
+  findPair,
+  guardBranchesOf,
+  keyName,
+  namedChildren,
+  pairsOf,
+  unwrapFilterCall,
+} from "@webpack/codemod-utils";
+import type { ConfigPlan, HtmlProp } from "../config-plan";
+import type { PageMode } from "./options";
+import { collectNamedBindings, isRequireOf } from "./bindings";
+
+// Companion plugins that extended html-webpack-plugin; each maps to one
+// `output.html` option. Only migrated alongside a migrated html-webpack-plugin.
+const CSP_MODULE = "csp-html-webpack-plugin";
+
+const SRI_MODULE = "webpack-subresource-integrity";
+
+const FAVICONS_MODULE = "favicons-webpack-plugin";
+
+const SIBLING_PLUGIN_MODULES = [CSP_MODULE, SRI_MODULE, FAVICONS_MODULE];
+
+export class CompanionPlugins {
+  readonly bindings: ModuleBinding[] = [];
+  private readonly siblingNameToModule = new Map<string, string>();
+
+  private readonly editor: ConfigEditor;
+
+  constructor(editor: ConfigEditor) {
+    this.editor = editor;
+
+    for (const moduleName of SIBLING_PLUGIN_MODULES) {
+      const named = collectNamedBindings(editor.rootNode, moduleName);
+
+      for (const binding of [...collectModuleBindings(editor.rootNode, moduleName), ...named]) {
+        if (this.siblingNameToModule.has(binding.name)) {
+          continue;
+        }
+
+        this.bindings.push(binding);
+        this.siblingNameToModule.set(binding.name, moduleName);
+      }
+    }
+  }
+
+  findUnsupportedConfigs(pluginsPairs: SgNode<Js>[]): Set<number> {
+    const blockedConfigs = new Set<number>();
+
+    // Dynamic favicon inputs need manual migration. Keep their HTML plugin
+    // too, because the companion relies on its hooks.
+    for (const pair of pluginsPairs) {
+      const value = unwrapFilterCall(pair.field("value") ?? pair);
+
+      if (!value.is("array")) {
+        continue;
+      }
+
+      if (
+        namedChildren(value).some((element) => {
+          const sibling = this.siblingInstantiationOf(element);
+
+          return sibling?.module === FAVICONS_MODULE && !this.faviconLogo(sibling.instantiation);
+        })
+      ) {
+        const config = pair.parent();
+
+        if (config) {
+          blockedConfigs.add(config.range().start.index);
+        }
+      }
+    }
+
+    return blockedConfigs;
+  }
+
+  private faviconLogo(instantiation: SgNode<Js>): SgNode<Js> | null {
+    const argsNode = instantiation.field("arguments");
+    const args = argsNode ? namedChildren(argsNode).filter((node) => !node.is("comment")) : [];
+
+    if (args.length !== 1) {
+      return null;
+    }
+
+    const option = args[0];
+
+    if (option.is("string")) {
+      return option;
+    }
+
+    if (
+      !option.is("object") ||
+      namedChildren(option).some((node) => !node.is("pair") && !node.is("comment"))
+    ) {
+      return null;
+    }
+
+    const logo = findPair(option, "logo")?.field("value");
+
+    return logo?.is("string") ? logo : null;
+  }
+
+  private siblingInstantiationOf(
+    element: SgNode<Js>,
+  ): { instantiation: SgNode<Js>; module: string } | null {
+    const branches = guardBranchesOf(element);
+
+    if (branches) {
+      for (const branch of branches) {
+        const found = this.siblingInstantiationOf(branch);
+
+        if (found) {
+          return found;
+        }
+      }
+
+      return null;
+    }
+
+    if (!element.is("new_expression")) {
+      return null;
+    }
+
+    const constructorNode = element.field("constructor");
+
+    if (!constructorNode) {
+      return null;
+    }
+
+    const inner = constructorNode.is("parenthesized_expression")
+      ? namedChildren(constructorNode)[0]
+      : constructorNode;
+    const module =
+      this.siblingNameToModule.get(constructorNode.text()) ??
+      SIBLING_PLUGIN_MODULES.find((name) => inner && isRequireOf(inner, name));
+
+    return module ? { instantiation: element, module } : null;
+  }
+
+  // Companion plugins piggybacked on html-webpack-plugin, so they only migrate
+  // (or make sense at all) next to a migrated instance. Returns the elements
+  // to remove alongside it.
+  processSiblings(
+    elements: SgNode<Js>[],
+    hwpElements: SgNode<Js>[],
+    mode: PageMode,
+    plan: ConfigPlan,
+  ): SgNode<Js>[] {
+    const hwpStarts = new Set(hwpElements.map((element) => element.range().start.index));
+    const removed: SgNode<Js>[] = [];
+
+    for (const element of elements) {
+      if (hwpStarts.has(element.range().start.index)) {
+        continue;
+      }
+
+      const sibling = this.siblingInstantiationOf(element);
+
+      if (!sibling) {
+        continue;
+      }
+
+      if (this.migrateSibling(sibling.module, sibling.instantiation, mode, plan)) {
+        removed.push(element);
+      } else {
+        plan.commentLines.push(
+          `Left ${sibling.module} in place — review it, its options could not be mapped to output.html`,
+        );
+      }
+    }
+
+    return removed;
+  }
+
+  private migrateSibling(
+    module: string,
+    instantiation: SgNode<Js>,
+    mode: PageMode,
+    plan: ConfigPlan,
+  ): boolean {
+    const argumentsNode = instantiation.field("arguments");
+    const args = argumentsNode ? namedChildren(argumentsNode) : [];
+    const lost: string[] = [];
+    const props: HtmlProp[] = [];
+
+    if (module === CSP_MODULE) {
+      const policy = args[0];
+
+      if (!policy) {
+        props.push({ name: "csp", valueText: "true" });
+      } else if (policy.is("object")) {
+        props.push({ name: "csp", valueText: `{ policy: ${policy.text()} }` });
+      } else {
+        return false;
+      }
+
+      const options = args[1];
+
+      if (options && options.is("object")) {
+        for (const optionPair of pairsOf(options)) {
+          lost.push(keyName(optionPair) ?? "options");
+        }
+      } else if (options) {
+        lost.push("options");
+      }
+    } else if (module === SRI_MODULE) {
+      let integrity = "true";
+      let enabled = true;
+      const options = args[0];
+
+      if (options && !options.is("object")) {
+        return false;
+      }
+
+      if (options) {
+        for (const optionPair of pairsOf(options)) {
+          const name = keyName(optionPair);
+          const value = optionPair.field("value");
+
+          if (name === "hashFuncNames" && value?.is("array")) {
+            integrity = value.text();
+          } else if (name === "enabled" && value?.is("false")) {
+            enabled = false;
+          } else if (name === "enabled") {
+            continue;
+          } else {
+            lost.push(name ?? "options");
+          }
+        }
+      }
+
+      if (enabled) {
+        props.push({ name: "integrity", valueText: integrity });
+      }
+    } else if (module === FAVICONS_MODULE) {
+      const logo = this.faviconLogo(instantiation);
+
+      if (!logo) {
+        return false;
+      }
+
+      props.push({ name: "favicon", valueText: logo.text() });
+
+      if (args[0]?.is("object")) {
+        for (const pair of pairsOf(args[0])) {
+          if (keyName(pair) !== "logo") {
+            lost.push(keyName(pair) ?? "options");
+          }
+        }
+      }
+
+      plan.commentLines.push(
+        "Review: native favicon emits the source icon only; generate the required icon sizes/formats and web app manifest manually, then configure their links in output.html or the HTML template",
+      );
+    } else {
+      return false;
+    }
+
+    for (const prop of props) {
+      if (mode === "multi") {
+        // A global `output.html` would generate a page for every entry.
+        lost.push(`${prop.name} (set output.html.${prop.name} by hand if every entry gets a page)`);
+      } else if (mode === "template" && prop.name === "favicon") {
+        // Favicons are only injected into webpack-generated pages.
+        lost.push("favicon (add it to the template)");
+      } else {
+        plan.htmlProps.push(prop);
+      }
+    }
+
+    if (lost.length) {
+      plan.commentLines.push(
+        `Removed ${
+          module === FAVICONS_MODULE ? "favicon generator" : module
+        } options without a native HTML equivalent: ${[...new Set(lost)].join(", ")}`,
+      );
+    }
+
+    return true;
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/src/plugins/entries.ts b/codemods/html-plugins-to-native-html/src/plugins/entries.ts
new file mode 100644
index 0000000..98de036
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/plugins/entries.ts
@@ -0,0 +1,143 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import {
+  ConfigEditor,
+  findPair,
+  keyName,
+  lineIndent,
+  namedChildren,
+  pairsOf,
+  unquote,
+} from "@webpack/codemod-utils";
+import type { InstanceFindings } from "./options";
+import { queueTemplate } from "../migration-state";
+import { templateScriptTag } from "../templates";
+
+// With `output.html` each entry gets its own page, unlike the plugin's
+// single page referencing every chunk — worth a note on multi-entry configs.
+export function noteMultiPageEntry(configObject: SgNode<Js>, findings: InstanceFindings): void {
+  const entryValue = findPair(configObject, "entry")?.field("value");
+
+  if (entryValue && entryValue.is("object") && pairsOf(entryValue).length > 1) {
+    findings.notes.push(
+      "output.html emits one page per entry; html-webpack-plugin emitted a single page with every chunk",
+    );
+  }
+}
+
+// The template becomes the entry (native HTML entry point); the previous
+// entry must be referenced from the template with a `<script>` tag. The HTML
+// workflow step applies that edit through the runner using shared state.
+export function migrateEntry(
+  editor: ConfigEditor,
+  configFileName: string,
+  configObject: SgNode<Js>,
+  findings: InstanceFindings,
+): void {
+  const templateValue = findings.templateValue as string;
+  const entryPair = findPair(configObject, "entry");
+
+  if (!entryPair) {
+    const injected = queueTemplate(
+      configFileName,
+      unquote(templateValue),
+      "./src/index.js",
+      "main",
+    );
+
+    findings.pendingEntry = {
+      text: templateValue,
+      comment: injected
+        ? `The template is now the entry: it must load the previous default entry via ${templateScriptTag(
+            { src: injected, chunkName: "main" },
+          )} (added by the HTML workflow step when the template is included)`
+        : `The template is now the entry: reference the previous entry (webpack's default is ./src/index.js) from it, e.g. <script defer src="./src/index.js"></script>`,
+    };
+
+    return;
+  }
+
+  const entryValue = entryPair.field("value");
+  const replaceable = entryValue ? replaceableEntryValue(entryValue) : null;
+
+  if (!replaceable) {
+    findings.lost.push("template (make the template an .html entry that loads your JS)");
+
+    return;
+  }
+
+  const chunkName = entryValue?.is("object") ? keyName(pairsOf(entryValue)[0]) ?? "main" : "main";
+  const injected = queueTemplate(
+    configFileName,
+    unquote(templateValue),
+    unquote(replaceable.text()),
+    chunkName,
+  );
+  const comment = injected
+    ? `The template is now the entry: it must load the previous entry via ${templateScriptTag({
+        src: injected,
+        chunkName,
+      })} (added by the HTML workflow step when the template is included)`
+    : `The template is now the entry: reference the previous entry from it, e.g. <script defer src=${replaceable.text()}></script>`;
+  const multiline = configObject.range().start.line !== configObject.range().end.line;
+
+  if (multiline) {
+    const indent = lineIndent(editor.source, entryPair.range().start.index);
+
+    editor.addEdit({
+      startPos: entryPair.range().start.index,
+      endPos: entryPair.range().start.index,
+      insertedText: `// ${comment}\n${indent}`,
+    });
+    editor.replace(replaceable, findings.templateValue as string);
+  } else {
+    editor.replace(
+      replaceable,
+      `/* ${comment.replace(/\*\//g, "* /")} */ ${findings.templateValue}`,
+    );
+  }
+}
+
+// A string entry value the template path can take over: the value itself, a
+// single-element array, or a single-key object's string value.
+export function replaceableEntryValue(entryValue: SgNode<Js>): SgNode<Js> | null {
+  if (entryValue.is("string")) {
+    return entryValue;
+  }
+
+  if (entryValue.is("array")) {
+    const elements = namedChildren(entryValue);
+
+    return elements.length === 1 && elements[0].is("string") ? elements[0] : null;
+  }
+
+  if (entryValue.is("object")) {
+    const entryPairs = pairsOf(entryValue);
+
+    if (entryPairs.length !== 1) {
+      return null;
+    }
+
+    if (namedChildren(entryValue).some((child) => !child.is("pair") && !child.is("comment"))) {
+      return null;
+    }
+
+    const key = entryPairs[0].field("key");
+
+    if (
+      !key ||
+      key.is("computed_property_name") ||
+      key.findAll({ rule: { kind: "escape_sequence" } }).length ||
+      // Escaped identifiers are leaf tokens; the parser exposes no escape child.
+      (key.is("property_identifier") && key.text().includes("\\"))
+    ) {
+      return null;
+    }
+
+    const inner = entryPairs[0].field("value");
+
+    return inner && inner.is("string") ? inner : null;
+  }
+
+  return null;
+}
diff --git a/codemods/html-plugins-to-native-html/src/plugins/hooks.ts b/codemods/html-plugins-to-native-html/src/plugins/hooks.ts
new file mode 100644
index 0000000..caebd0b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/plugins/hooks.ts
@@ -0,0 +1,258 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import {
+  ConfigEditor,
+  type ModuleBinding,
+  addImport,
+  collectModuleBindings,
+  lineIndent,
+  namedChildren,
+} from "@webpack/codemod-utils";
+
+// Plugin hooks renamed to the native `HtmlModulesPlugin.getCompilationHooks`
+// stage covering the same moment; arguments differ, hence the review comments.
+const HOOK_RENAMES = new Map([
+  ["alterAssetTags", "transformTags"],
+  ["alterAssetTagGroups", "transformTags"],
+  ["beforeEmit", "transformHtml"],
+  ["afterEmit", "htmlEmitted"],
+]);
+
+const HOOK_REVIEW_COMMENTS = new Map([
+  [
+    "transformTags",
+    "transformTags receives mutable tag descriptors (tags, { outputName, html }); mutate attrs/injectTo/remove, add tags via the injectTags hook",
+  ],
+  [
+    "transformHtml",
+    "transformHtml receives (html, { outputName }) and must return the html string",
+  ],
+  ["htmlEmitted", "htmlEmitted receives ({ outputName }); nothing to return"],
+]);
+
+// Stages webpack handles itself — a tap on them cannot be carried over, so
+// files using them are left untouched.
+const UNMAPPABLE_HOOKS = new Set(["beforeAssetTagGeneration", "afterTemplateExecution"]);
+
+export class HtmlPluginHooks {
+  readonly repurposedStatements = new Set<number>();
+  private readonly pluginNames: Set<string>;
+
+  private readonly editor: ConfigEditor;
+  private readonly pluginBindings: ModuleBinding[];
+
+  constructor(editor: ConfigEditor, pluginBindings: ModuleBinding[]) {
+    this.editor = editor;
+    this.pluginBindings = pluginBindings;
+
+    this.pluginNames = new Set(pluginBindings.map((binding) => binding.name));
+  }
+
+  usesUnmappableHooks(): boolean {
+    if (!this.pluginNames.size || !this.pluginHookReceivers().length) {
+      return false;
+    }
+
+    for (const node of this.pluginHookProperties()) {
+      if (UNMAPPABLE_HOOKS.has(node.text())) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  // `X.getHooks(...)` / `X.getCompilationHooks(...)` receivers on the plugin.
+  private pluginHookReceivers(): SgNode<Js>[] {
+    const receivers: SgNode<Js>[] = [];
+
+    for (const node of this.editor.rootNode.findAll({ rule: { kind: "member_expression" } })) {
+      const property = node.field("property")?.text();
+
+      if (property !== "getHooks" && property !== "getCompilationHooks") {
+        continue;
+      }
+
+      const objectPart = node.field("object");
+
+      if (objectPart && this.pluginNames.has(objectPart.text())) {
+        receivers.push(node);
+      }
+    }
+
+    return receivers;
+  }
+
+  // Only keys read from this plugin's hook object belong to its API. Other
+  // plugins and ordinary application properties may use exactly the same names.
+  private pluginHookProperties(): SgNode<Js>[] {
+    const properties: SgNode<Js>[] = [];
+
+    for (const receiver of this.pluginHookReceivers()) {
+      const call = receiver.parent();
+      const access = call?.parent();
+
+      if (access?.is("member_expression")) {
+        const property = access.field("property");
+
+        if (property) {
+          properties.push(property);
+        }
+      } else if (access?.is("variable_declarator")) {
+        const name = access.field("name");
+
+        if (name?.is("object_pattern")) {
+          for (const member of namedChildren(name)) {
+            const key = member.is("pair_pattern") ? member.field("key") : member;
+
+            if (key) {
+              properties.push(key);
+            }
+          }
+        } else if (name?.is("identifier")) {
+          for (const member of this.editor.rootNode.findAll({
+            rule: { kind: "member_expression" },
+          })) {
+            if (member.field("object")?.text() !== name.text()) {
+              continue;
+            }
+
+            const property = member.field("property");
+
+            if (property) {
+              properties.push(property);
+            }
+          }
+        }
+      }
+    }
+
+    return properties;
+  }
+
+  // Retarget `HtmlWebpackPlugin.getHooks(...)` taps to the native
+  // `HtmlModulesPlugin.getCompilationHooks(...)` stages. Only done when this
+  // file's plugin setup was actually migrated and no instance survives.
+  migrateHooks(): void {
+    const receivers = this.pluginHookReceivers();
+
+    if (!receivers.length) {
+      return;
+    }
+
+    const nativeReceiver = this.nativeHooksReceiver();
+
+    for (const node of receivers) {
+      this.editor.replace(node, `${nativeReceiver}.getCompilationHooks`);
+    }
+
+    // One review comment per statement holding a renamed tap.
+    const commentedStatements = new Set<string>();
+
+    for (const property of this.pluginHookProperties()) {
+      const renamed = HOOK_RENAMES.get(property.text());
+
+      if (!renamed) {
+        continue;
+      }
+
+      this.editor.replace(
+        property,
+        property.is("shorthand_property_identifier_pattern")
+          ? `${renamed}: ${property.text()}`
+          : renamed,
+      );
+
+      const statement = this.statementOf(property);
+      const review = HOOK_REVIEW_COMMENTS.get(renamed);
+
+      if (!statement || !review) {
+        continue;
+      }
+
+      const key = `${statement.range().start.index}:${renamed}`;
+
+      if (commentedStatements.has(key)) {
+        continue;
+      }
+
+      commentedStatements.add(key);
+
+      if (
+        receivers.some((receiver) => receiver.range().start.index === statement.range().start.index)
+      ) {
+        // An insertion at the same position as the receiver replacement would
+        // be swallowed by commitEdits. A trailing comment avoids the overlap.
+        this.editor.insertAfter(statement, ` /* Review: ${review} */`);
+
+        continue;
+      }
+
+      const lineStart = this.editor.source.lastIndexOf("\n", statement.range().start.index - 1) + 1;
+      const indent = lineIndent(this.editor.source, statement.range().start.index);
+
+      this.editor.addEdit({
+        startPos: lineStart,
+        endPos: lineStart,
+        insertedText: `${indent}// Review: ${review}\n`,
+      });
+    }
+  }
+
+  // The statement carrying a node, for placing a comment line above it.
+  private statementOf(node: SgNode<Js>): SgNode<Js> | null {
+    let current: SgNode<Js> | null = node;
+
+    while (current) {
+      const parent: SgNode<Js> | null = current.parent();
+
+      if (!parent) {
+        return null;
+      }
+
+      if (parent.is("statement_block") || parent.is("program") || parent.is("class_body")) {
+        return current;
+      }
+
+      current = parent;
+    }
+
+    return null;
+  }
+
+  // Existing webpack binding, or an `html` import — rewriting the plugin's own
+  // import statement in place when possible (a separate added import would
+  // land inside the removed statement's range and be dropped).
+  private nativeHooksReceiver(): string {
+    const webpackBindings = collectModuleBindings(this.editor.rootNode, "webpack");
+
+    if (webpackBindings.length) {
+      return `${webpackBindings[0].name}.html.HtmlModulesPlugin`;
+    }
+
+    const binding = this.pluginBindings[0];
+
+    if (binding) {
+      const isEsm = binding.statement.is("import_statement");
+
+      this.editor.replace(
+        binding.statement,
+        isEsm ? 'import { html } from "webpack";' : 'const { html } = require("webpack");',
+      );
+      this.repurposedStatements.add(binding.statement.range().start.index);
+    } else {
+      const edit = addImport(this.editor.rootNode as SgNode<Js, "program">, {
+        type: "named",
+        specifiers: [{ name: "html" }],
+        from: "webpack",
+        moduleType: "cjs",
+      });
+
+      if (edit) {
+        this.editor.addEdit(edit);
+      }
+    }
+
+    return "html.HtmlModulesPlugin";
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/src/plugins/migration.ts b/codemods/html-plugins-to-native-html/src/plugins/migration.ts
new file mode 100644
index 0000000..c5330eb
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/plugins/migration.ts
@@ -0,0 +1,362 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import {
+  ConfigEditor,
+  type ModuleBinding,
+  findPair,
+  guardBranchesOf,
+  namedChildren,
+  unquote,
+  unwrapFilterCall,
+} from "@webpack/codemod-utils";
+import { ConfigPlans } from "../config-plan";
+import type { Minification } from "../minification";
+import { CompanionPlugins } from "./companions";
+import { PLUGIN_MODULE, isRequireOf } from "./bindings";
+import { collectFindings, type InstanceFindings, type PageMode } from "./options";
+import { migrateEntry, noteMultiPageEntry, replaceableEntryValue } from "./entries";
+
+// Handled by the per-entry migration itself rather than the option mapping.
+const MULTI_PAGE_SKIPPED_OPTIONS = new Set(["chunks", "filename"]);
+
+export class HtmlPluginMigration {
+  migrated = false;
+  retained = false;
+  private readonly pluginNames: Set<string>;
+  private readonly configFileName: string;
+
+  private readonly editor: ConfigEditor;
+  private readonly plans: ConfigPlans;
+  private readonly companions: CompanionPlugins;
+  private readonly blockedConfigs: Set<number>;
+
+  constructor(
+    editor: ConfigEditor,
+    plans: ConfigPlans,
+    companions: CompanionPlugins,
+    blockedConfigs: Set<number>,
+    pluginBindings: ModuleBinding[],
+  ) {
+    this.editor = editor;
+    this.plans = plans;
+    this.companions = companions;
+    this.blockedConfigs = blockedConfigs;
+
+    this.pluginNames = new Set(pluginBindings.map((binding) => binding.name));
+    this.configFileName = editor.rootNode.getRoot().filename();
+  }
+
+  // The plugin instantiation behind a plugins element, unwrapping guards.
+  private pluginInstantiationOf(element: SgNode<Js>): SgNode<Js> | null {
+    const branches = guardBranchesOf(element);
+
+    if (branches) {
+      for (const branch of branches) {
+        const found = this.pluginInstantiationOf(branch);
+
+        if (found) {
+          return found;
+        }
+      }
+
+      return null;
+    }
+
+    if (!element.is("new_expression")) {
+      return null;
+    }
+
+    const constructorNode = element.field("constructor");
+
+    if (!constructorNode) {
+      return null;
+    }
+
+    if (this.pluginNames.has(constructorNode.text())) {
+      return element;
+    }
+
+    // `new (require("html-webpack-plugin"))(...)` without a binding.
+    const inner = constructorNode.is("parenthesized_expression")
+      ? namedChildren(constructorNode)[0] ?? constructorNode
+      : constructorNode;
+
+    return isRequireOf(inner, PLUGIN_MODULE) ? element : null;
+  }
+
+  transformPluginsPair(pluginsPair: SgNode<Js>): void {
+    const configObject = pluginsPair.parent();
+
+    if (!configObject || !configObject.is("object")) {
+      return;
+    }
+
+    if (this.blockedConfigs.has(configObject.range().start.index)) {
+      return;
+    }
+
+    const value = unwrapFilterCall(pluginsPair.field("value") ?? pluginsPair);
+
+    if (!value.is("array")) {
+      return;
+    }
+
+    const elements = namedChildren(value);
+    const instances: { element: SgNode<Js>; instantiation: SgNode<Js> }[] = [];
+
+    for (const element of elements) {
+      const instantiation = this.pluginInstantiationOf(element);
+
+      if (instantiation) {
+        instances.push({ element, instantiation });
+      }
+    }
+
+    if (!instances.length) {
+      return;
+    }
+
+    // A computed destination cannot safely receive the native settings.
+    if (
+      ["output", "experiments"].some((key) => {
+        const destination = findPair(configObject, key)?.field("value");
+
+        return destination && !destination.is("object");
+      })
+    ) {
+      this.retained = true;
+
+      return;
+    }
+
+    // Every options argument must be an object literal to be understood.
+    const optionObjects: (SgNode<Js> | undefined)[] = [];
+
+    for (const { instantiation } of instances) {
+      const argumentsNode = instantiation.field("arguments");
+      const optionsObject = argumentsNode ? namedChildren(argumentsNode)[0] : undefined;
+
+      if (
+        optionsObject &&
+        (!optionsObject.is("object") ||
+          namedChildren(optionsObject).some((child) => !child.is("pair") && !child.is("comment")))
+      ) {
+        this.retained = true;
+
+        return;
+      }
+
+      const template = optionsObject && findPair(optionsObject, "template")?.field("value");
+      const entry = findPair(configObject, "entry")?.field("value");
+
+      if (template && (!template.is("string") || (entry && !replaceableEntryValue(entry)))) {
+        this.retained = true;
+
+        return;
+      }
+
+      optionObjects.push(optionsObject);
+    }
+
+    // Several instances (or a `chunks` list) mean per-entry pages instead of
+    // the global `output.html`.
+    const firstOptions = optionObjects[0];
+    const chunkRestricted =
+      instances.length > 1 ||
+      (firstOptions !== undefined && findPair(firstOptions, "chunks")?.field("value")?.is("array"));
+
+    if (chunkRestricted) {
+      this.migrateMultiPage(configObject, pluginsPair, elements, instances, optionObjects);
+
+      return;
+    }
+
+    const findings = collectFindings(firstOptions);
+    const plan = this.plans.planFor(configObject);
+    const mode: PageMode = findings.templateValue !== null ? "template" : "single";
+
+    if (findings.templateValue !== null) {
+      migrateEntry(this.editor, this.configFileName, configObject, findings);
+    } else {
+      noteMultiPageEntry(configObject, findings);
+    }
+
+    this.mergeIntoPlan(configObject, findings);
+
+    const siblingRemoved = this.companions.processSiblings(
+      elements,
+      [instances[0].element],
+      mode,
+      plan,
+    );
+
+    this.removeInstances(pluginsPair, elements, [instances[0].element, ...siblingRemoved]);
+    this.migrated = true;
+  }
+
+  private removeInstances(
+    pluginsPair: SgNode<Js>,
+    elements: SgNode<Js>[],
+    removedElements: SgNode<Js>[],
+  ): void {
+    if (removedElements.length === elements.length) {
+      this.editor.markForRemoval(pluginsPair);
+    } else {
+      for (const element of removedElements) {
+        this.editor.markForRemoval(element);
+      }
+    }
+  }
+
+  // One instance per page (`chunks: ["name"]`) maps to the entry descriptor
+  // `html` option; entries no instance claims get no page, so the global
+  // `output.html` stays off. Anything the shape can't express bails out.
+  private migrateMultiPage(
+    configObject: SgNode<Js>,
+    pluginsPair: SgNode<Js>,
+    elements: SgNode<Js>[],
+    instances: { element: SgNode<Js>; instantiation: SgNode<Js> }[],
+    optionObjects: (SgNode<Js> | undefined)[],
+  ): void {
+    const entryValue = findPair(configObject, "entry")?.field("value");
+
+    if (!entryValue || !entryValue.is("object")) {
+      this.retained = true;
+
+      return;
+    }
+
+    const plan = this.plans.planFor(configObject);
+    const pages: { entryDescriptor: SgNode<Js>; htmlValue: string }[] = [];
+    const minification: Minification[] = [];
+    const lost: string[] = [];
+    let moduleScripts = false;
+
+    for (const options of optionObjects) {
+      // Each page needs exactly one owning entry in `chunks`.
+      const chunksValue = options ? findPair(options, "chunks")?.field("value") : undefined;
+      const chunkNames = chunksValue?.is("array") ? namedChildren(chunksValue) : [];
+
+      if (!options || chunkNames.length !== 1 || !chunkNames[0].is("string")) {
+        this.retained = true;
+
+        return;
+      }
+
+      const chunkName = unquote(chunkNames[0].text());
+      const entryDescriptor = findPair(entryValue, chunkName)?.field("value");
+
+      if (!entryDescriptor) {
+        this.retained = true;
+
+        return;
+      }
+
+      if (findPair(options, "template") || findPair(options, "templateContent")) {
+        this.retained = true;
+
+        return;
+      }
+
+      const findings = collectFindings(options, MULTI_PAGE_SKIPPED_OPTIONS);
+
+      minification.push(findings.minification);
+
+      // The page filename must fit the shared `htmlFilename: "[name].html"`.
+      const filenameValue = findPair(options, "filename")?.field("value");
+
+      if (filenameValue) {
+        const filename = filenameValue.is("string") ? unquote(filenameValue.text()) : null;
+
+        if (filename !== `${chunkName}.html` && filename !== "[name].html") {
+          lost.push(`filename "${filename ?? "?"}" (output.htmlFilename is "[name].html")`);
+        }
+      }
+
+      lost.push(...findings.lost);
+      moduleScripts ||= findings.scriptLoadingModule;
+
+      const htmlValue = findings.htmlProps.length
+        ? `{ ${findings.htmlProps.map((prop) => `${prop.name}: ${prop.valueText}`).join(", ")} }`
+        : "true";
+
+      pages.push({ entryDescriptor, htmlValue });
+    }
+
+    // Per-page minification cannot be represented by a compilation-wide option.
+    if (new Set(minification.map((request) => request.html ?? "{}")).size > 1) {
+      this.retained = true;
+
+      return;
+    }
+
+    plan.minification.push(...minification);
+
+    const siblingRemoved = this.companions.processSiblings(
+      elements,
+      instances.map((instance) => instance.element),
+      "multi",
+      plan,
+    );
+
+    this.removeInstances(pluginsPair, elements, [
+      ...instances.map((instance) => instance.element),
+      ...siblingRemoved,
+    ]);
+
+    for (const page of pages) {
+      const node = page.entryDescriptor;
+
+      if (node.is("object")) {
+        if (!findPair(node, "html")) {
+          this.editor.insertIntoObject(node, () => [`html: ${page.htmlValue}`]);
+        }
+      } else {
+        this.editor.replace(node, `{ import: ${node.text()}, html: ${page.htmlValue} }`);
+      }
+    }
+
+    plan.pluginMigratedHere = true;
+    this.plans.requireExperimentsHtml(plan);
+    this.plans.applyModuleScripts(plan, moduleScripts);
+    plan.htmlFilename ??= '"[name].html"';
+
+    if (lost.length) {
+      plan.commentLines.push(
+        `Removed html-webpack-plugin options without a native HTML equivalent: ${[
+          ...new Set(lost),
+        ].join(", ")}`,
+      );
+    }
+
+    this.migrated = true;
+  }
+
+  private mergeIntoPlan(configObject: SgNode<Js>, findings: InstanceFindings): void {
+    const plan = this.plans.planFor(configObject);
+
+    plan.minification.push(findings.minification);
+    plan.pluginMigratedHere = true;
+    this.plans.requireExperimentsHtml(plan);
+
+    if (findings.lost.length) {
+      plan.commentLines.push(
+        `Removed html-webpack-plugin options without a native HTML equivalent: ${[
+          ...new Set(findings.lost),
+        ].join(", ")}`,
+      );
+    }
+
+    plan.commentLines.push(...findings.notes);
+
+    if (findings.templateValue === null) {
+      plan.htmlEnabled = true;
+    }
+
+    plan.htmlProps.push(...findings.htmlProps);
+    this.plans.applyModuleScripts(plan, findings.scriptLoadingModule);
+    // The plugin emitted `index.html` by default; native defaults to `[name].html`.
+    plan.htmlFilename ??= findings.htmlFilename ?? '"index.html"';
+    plan.pendingEntry = findings.pendingEntry;
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/src/plugins/options.ts b/codemods/html-plugins-to-native-html/src/plugins/options.ts
new file mode 100644
index 0000000..976f56c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/plugins/options.ts
@@ -0,0 +1,252 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import { findPair, keyName, pairsOf, unquote } from "@webpack/codemod-utils";
+import { collectMinification, type Minification } from "../minification";
+import type { HtmlProp } from "../config-plan";
+
+// Native HTML defaults already covered by these plugin option values.
+const HEAD_TAG_OPTIONS = new Set(["title", "meta", "favicon", "base"]);
+
+// Build-ergonomics options with no effect on the emitted page.
+const DROPPABLE_OPTIONS = new Set(["cache", "showErrors", "chunksSortMode"]);
+
+// Manual migration paths appended to the review comment where one exists.
+const LOST_OPTION_HINTS = new Map([
+  ["publicPath", "set output.publicPath"],
+  ["hash", "use [contenthash] in output.htmlFilename"],
+  ["chunks", "use per-entry `html` descriptors"],
+  ["excludeChunks", "use per-entry `html` descriptors"],
+  ["scriptLoading", "module scripts come from output.module"],
+  ["templateContent", "author the page as an .html entry file"],
+]);
+
+export type PageMode = "single" | "template" | "multi";
+
+// Everything one plugin instance contributes to its enclosing config.
+export interface InstanceFindings {
+  minification: Minification;
+  htmlProps: HtmlProp[];
+  htmlFilename: string | null;
+  templateValue: string | null;
+  lost: string[];
+  notes: string[];
+  // `entry` property to create when the config had none (template mode).
+  pendingEntry: { text: string; comment: string } | null;
+  // `scriptLoading: "module"` — ESM output, set config-wide.
+  scriptLoadingModule: boolean;
+}
+
+function describeLost(name: string): string {
+  const hint = LOST_OPTION_HINTS.get(name);
+
+  return hint ? `${name} (${hint})` : name;
+}
+
+export function collectFindings(
+  optionsObject: SgNode<Js> | undefined,
+  skippedOptions?: Set<string>,
+): InstanceFindings {
+  const findings: InstanceFindings = {
+    minification: collectMinification(
+      optionsObject ? findPair(optionsObject, "minify")?.field("value") : undefined,
+      "minify",
+    ),
+    htmlProps: [],
+    htmlFilename: null,
+    templateValue: null,
+    lost: [],
+    notes: [],
+    pendingEntry: null,
+    scriptLoadingModule: false,
+  };
+
+  if (!optionsObject) {
+    return findings;
+  }
+
+  const templateValue = findPair(optionsObject, "template")?.field("value");
+  const templateMode = Boolean(templateValue);
+
+  if (templateValue) {
+    if (templateValue.is("string")) {
+      findings.templateValue = templateValue.text();
+    } else {
+      findings.lost.push("template");
+    }
+  }
+
+  for (const optionPair of pairsOf(optionsObject)) {
+    const name = keyName(optionPair);
+    const optionValue = optionPair.field("value");
+
+    if (!name || !optionValue) {
+      findings.lost.push("options");
+
+      continue;
+    }
+
+    if (name === "template" || DROPPABLE_OPTIONS.has(name)) {
+      continue;
+    }
+
+    if (skippedOptions && skippedOptions.has(name)) {
+      continue;
+    }
+
+    collectOption(name, optionValue, templateMode, findings);
+  }
+
+  return findings;
+}
+
+function collectOption(
+  name: string,
+  value: SgNode<Js>,
+  templateMode: boolean,
+  findings: InstanceFindings,
+): void {
+  const literal = value.is("string") ? unquote(value.text()) : null;
+
+  // Head tags are only injected into webpack-generated pages, never into an
+  // authored template — there the tag belongs in the template itself.
+  if (HEAD_TAG_OPTIONS.has(name) && templateMode) {
+    findings.lost.push(`${name} (add it to the template)`);
+
+    return;
+  }
+
+  switch (name) {
+    case "filename":
+      if (value.is("string")) {
+        findings.htmlFilename = value.text();
+      } else {
+        findings.lost.push(describeLost(name));
+      }
+
+      break;
+    case "title":
+    case "favicon":
+    case "base":
+      findings.htmlProps.push({ name, valueText: value.text() });
+
+      break;
+    case "meta":
+      collectMetaOption(value, findings);
+
+      break;
+    case "inject":
+      // `true` is the native default placement; the template authors its own tags.
+      if (templateMode || value.is("true")) {
+        break;
+      }
+
+      if (value.is("false") || literal === "body" || literal === "head") {
+        findings.htmlProps.push({
+          name,
+          valueText: value.is("false") ? "false" : `"${literal}"`,
+        });
+      } else {
+        findings.lost.push(describeLost(name));
+      }
+
+      break;
+    case "scriptLoading":
+      // Native `"auto"` already defers classic scripts.
+      if (literal === "defer") {
+        break;
+      }
+
+      if (templateMode) {
+        if (literal === "module") {
+          findings.lost.push(
+            'scriptLoading (enable output.module and use <script type="module"> in the template)',
+          );
+        }
+      } else if (literal === "blocking") {
+        findings.htmlProps.push({ name, valueText: '"blocking"' });
+      } else if (literal === "module") {
+        findings.scriptLoadingModule = true;
+      } else {
+        findings.lost.push(describeLost(name));
+      }
+
+      break;
+    case "minify":
+      findings.lost.push(...findings.minification.lost);
+
+      break;
+    case "chunks":
+      if (literal !== "all") {
+        findings.lost.push(describeLost(name));
+      }
+
+      break;
+    case "publicPath":
+      if (literal !== "auto") {
+        findings.lost.push(describeLost(name));
+      }
+
+      break;
+    case "hash":
+    case "xhtml":
+      if (!value.is("false")) {
+        findings.lost.push(describeLost(name));
+      }
+
+      break;
+    default:
+      findings.lost.push(describeLost(name));
+  }
+}
+
+// Meta values map when they are `content` strings, or `{ name |
+// property, content }` objects (native keys `og:*` use `property` on their
+// own); anything else — extra attributes, `http-equiv` — is flagged per key.
+function collectMetaOption(value: SgNode<Js>, findings: InstanceFindings): void {
+  if (!value.is("object")) {
+    findings.lost.push("meta");
+
+    return;
+  }
+
+  const parts: string[] = [];
+
+  for (const metaPair of pairsOf(value)) {
+    const metaKey = keyName(metaPair);
+    const metaValue = metaPair.field("value");
+
+    if (!metaKey || !metaValue) {
+      findings.lost.push("meta");
+
+      continue;
+    }
+
+    if (metaValue.is("string")) {
+      parts.push(metaPair.text());
+
+      continue;
+    }
+
+    if (metaValue.is("object")) {
+      const nameValue = (findPair(metaValue, "name") ?? findPair(metaValue, "property"))?.field(
+        "value",
+      );
+      const contentValue = findPair(metaValue, "content")?.field("value");
+      const extraKeys = pairsOf(metaValue)
+        .map((pair) => keyName(pair))
+        .filter((key) => key !== "name" && key !== "property" && key !== "content");
+
+      if (nameValue?.is("string") && contentValue && !extraKeys.length) {
+        parts.push(`"${unquote(nameValue.text())}": ${contentValue.text()}`);
+
+        continue;
+      }
+    }
+
+    findings.lost.push(`meta.${metaKey}`);
+  }
+
+  if (parts.length) {
+    findings.htmlProps.push({ name: "meta", valueText: `{ ${parts.join(", ")} }` });
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/src/remove-dependencies.ts b/codemods/html-plugins-to-native-html/src/remove-dependencies.ts
new file mode 100644
index 0000000..1a6c1ae
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/remove-dependencies.ts
@@ -0,0 +1,73 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type Json from "@codemod.com/jssg-types/langs/json";
+import type { SgNode, SgRoot } from "@codemod.com/jssg-types/main";
+import { ConfigEditor, findPair, keyName, namedChildren, pairsOf } from "@webpack/codemod-utils";
+
+import { remainingPackages } from "./migration-state";
+import { HTML_PACKAGES, manifestPackageReferences } from "./package-references";
+
+const REMOVED_PACKAGES = new Set(HTML_PACKAGES);
+const DEPENDENCY_KEYS = ["dependencies", "devDependencies"];
+
+export function removeUnusedDependencies(
+  root: SgRoot<Json>,
+  remaining: Set<string> | null,
+): string | null {
+  // JSON shares the object/pair/string node kinds the editor operates on.
+  const rootNode = root.root() as unknown as SgNode<Js>;
+  const editor = new ConfigEditor(rootNode);
+  const manifest = namedChildren(rootNode)[0];
+
+  if (!manifest || !manifest.is("object")) {
+    return null;
+  }
+
+  if (!remaining) {
+    return null;
+  }
+
+  // Scripts and other manifest fields can invoke these packages as well.
+  for (const pair of pairsOf(manifest)) {
+    if (DEPENDENCY_KEYS.includes(keyName(pair) ?? "")) {
+      continue;
+    }
+
+    const value = pair.field("value");
+
+    if (!value) {
+      continue;
+    }
+
+    for (const name of manifestPackageReferences(value, keyName(pair) === "scripts")) {
+      remaining.add(name);
+    }
+  }
+
+  for (const key of DEPENDENCY_KEYS) {
+    const value = findPair(manifest, key)?.field("value");
+
+    if (!value || !value.is("object")) {
+      continue;
+    }
+
+    for (const pair of pairsOf(value)) {
+      const name = keyName(pair);
+
+      if (name && REMOVED_PACKAGES.has(name) && !remaining.has(name)) {
+        editor.markForRemoval(pair);
+      }
+    }
+  }
+
+  editor.finalizeRemovals();
+
+  if (!editor.hasEdits) {
+    return null;
+  }
+
+  return editor.commit();
+}
+
+export default async function transform(root: SgRoot<Json>): Promise<string | null> {
+  return removeUnusedDependencies(root, remainingPackages(root.filename()));
+}
diff --git a/codemods/html-plugins-to-native-html/src/templates.ts b/codemods/html-plugins-to-native-html/src/templates.ts
new file mode 100644
index 0000000..b2a1582
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/templates.ts
@@ -0,0 +1,140 @@
+import type Html from "@codemod.com/jssg-types/langs/html";
+import type { Edit, SgRoot } from "@codemod.com/jssg-types/main";
+import { normalizeFilename, scriptsForTemplate, type TemplateScript } from "./migration-state";
+
+function attributeValue(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+
+function chunkComment(name: string): string {
+  // JSON escapes are understood by webpack's magic-comment parser. Escape
+  // HTML delimiters too so an entry name cannot terminate the comment.
+  const escaped = JSON.stringify(name)
+    .replace(/</g, "\\u003c")
+    .replace(/>/g, "\\u003e")
+    .replace(/-/g, "\\u002d");
+
+  return `<!-- webpackChunkName: ${escaped} -->`;
+}
+
+export function templateScriptTag(script: TemplateScript): string {
+  return `${
+    script.chunkName ? `${chunkComment(script.chunkName)} ` : ""
+  }<script defer src="${attributeValue(script.src)}"></script>`;
+}
+
+export function addTemplateScripts(root: SgRoot<Html>, scripts: TemplateScript[]): string | null {
+  if (!scripts.length) {
+    return null;
+  }
+
+  const node = root.root();
+  const source = node.text();
+  const eol = source.includes("\r\n") ? "\r\n" : "\n";
+  const edits: Edit[] = [];
+  const requested = new Map<string, TemplateScript>();
+  const names = new Map<string, Set<string | undefined>>();
+
+  for (const script of scripts) {
+    const key = normalizeFilename(attributeValue(script.src));
+    const chunkNames = names.get(key) ?? new Set();
+
+    chunkNames.add(script.chunkName);
+    names.set(key, chunkNames);
+    // Shared templates may be requested by configs with different entry names.
+    // Keep webpack's default naming when there is no unambiguous choice.
+    requested.set(key, {
+      src: script.src,
+      chunkName: chunkNames.size === 1 ? script.chunkName : undefined,
+    });
+  }
+
+  const existing = new Set<string>();
+
+  for (const script of node.findAll({ rule: { kind: "script_element" } })) {
+    const start = script.children().find((child) => child.is("start_tag"));
+
+    for (const attribute of start?.children() ?? []) {
+      if (!attribute.is("attribute")) {
+        continue;
+      }
+
+      const name = attribute.children().find((child) => child.is("attribute_name"));
+
+      if (name?.text().toLowerCase() !== "src") {
+        continue;
+      }
+
+      const value = attribute
+        .children()
+        .find((child) => child.is("quoted_attribute_value") || child.is("attribute_value"));
+
+      if (!value) {
+        continue;
+      }
+
+      const content = value.is("quoted_attribute_value")
+        ? value.children().find((child) => child.is("attribute_value"))
+        : value;
+      const key = normalizeFilename(content?.text() ?? "");
+
+      existing.add(key);
+
+      const chunkName = requested.get(key)?.chunkName;
+      const previous = script.prev();
+
+      // A new comment would override existing webpackIgnore/Preload/etc.
+      if (!chunkName || (previous?.is("comment") && /\bwebpack\w+\s*:/.test(previous.text()))) {
+        continue;
+      }
+
+      const position = script.range().start.index;
+      const indent = source.slice(source.lastIndexOf("\n", position - 1) + 1, position);
+      const separator = /^[ \t]*$/.test(indent) ? `${eol}${indent}` : " ";
+
+      edits.push({
+        startPos: position,
+        endPos: position,
+        insertedText: `${chunkComment(chunkName)}${separator}`,
+      });
+    }
+  }
+
+  const missing = [...requested].filter(([key]) => !existing.has(key)).map(([, script]) => script);
+
+  if (!missing.length) {
+    return edits.length ? node.commitEdits(edits) : null;
+  }
+
+  const tags = missing.map(templateScriptTag);
+  const endings = node.findAll({ rule: { kind: "end_tag" } });
+  const closingTag = (name: string) =>
+    endings.find((tag) =>
+      tag.children().some((child) => child.is("tag_name") && child.text().toLowerCase() === name),
+    );
+  const closing = closingTag("head") ?? closingTag("body");
+  let position = source.length;
+  let text = `${source.endsWith("\n") || !source ? "" : eol}${tags.join(eol)}${eol}`;
+
+  if (closing) {
+    position = closing.range().start.index;
+
+    const lineStart = source.lastIndexOf("\n", position - 1) + 1;
+    const indent = source.slice(lineStart, position);
+
+    if (/^[ \t]*$/.test(indent)) {
+      position = lineStart;
+      text = tags.map((tag) => `${indent}  ${tag}${eol}`).join("");
+    } else {
+      text = tags.join("");
+    }
+  }
+
+  edits.push({ startPos: position, endPos: position, insertedText: text });
+
+  return node.commitEdits(edits);
+}
+
+export default async function transform(root: SgRoot<Html>): Promise<string | null> {
+  return addTemplateScripts(root, scriptsForTemplate(root.filename()));
+}
diff --git a/codemods/html-plugins-to-native-html/src/workflow.ts b/codemods/html-plugins-to-native-html/src/workflow.ts
new file mode 100644
index 0000000..29038b2
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/src/workflow.ts
@@ -0,0 +1,86 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode, SgRoot } from "@codemod.com/jssg-types/main";
+import { parse } from "codemod:ast-grep";
+import { ConfigEditor, collectModuleBindings, keyName } from "@webpack/codemod-utils";
+
+import { ConfigPlans } from "./config-plan";
+import { HtmlLoaderRules } from "./loaders/rules";
+import { recordSource } from "./migration-state";
+import { sourcePackageReferences } from "./package-references";
+import { PLUGIN_MODULE } from "./plugins/bindings";
+import { CompanionPlugins } from "./plugins/companions";
+import { HtmlPluginHooks } from "./plugins/hooks";
+import { HtmlPluginMigration } from "./plugins/migration";
+
+function migrateConfiguration(root: SgRoot<Js>): string | null {
+  const editor = new ConfigEditor(root.root());
+  const bindings = collectModuleBindings(editor.rootNode, PLUGIN_MODULE);
+  const hooks = new HtmlPluginHooks(editor, bindings);
+
+  // A tap on an unavailable native stage keeps the entire file unchanged.
+  if (hooks.usesUnmappableHooks()) {
+    return null;
+  }
+
+  const usePairs: SgNode<Js>[] = [];
+  const loaderPairs: SgNode<Js>[] = [];
+  const pluginsPairs: SgNode<Js>[] = [];
+
+  for (const pair of editor.rootNode.findAll({ rule: { kind: "pair" } })) {
+    const name = keyName(pair);
+
+    if (name === "use") {
+      usePairs.push(pair);
+    } else if (name === "loader") {
+      loaderPairs.push(pair);
+    } else if (name === "plugins") {
+      pluginsPairs.push(pair);
+    }
+  }
+
+  const plans = new ConfigPlans(editor);
+  const companions = new CompanionPlugins(editor);
+  const blockedConfigs = companions.findUnsupportedConfigs(pluginsPairs);
+  const rules = new HtmlLoaderRules(editor, plans, blockedConfigs);
+  const plugins = new HtmlPluginMigration(editor, plans, companions, blockedConfigs, bindings);
+
+  // Retained loaders and companion plugins must be identified before plugins
+  // or templates are changed in their owning configuration.
+  rules.transformRules(usePairs, loaderPairs);
+
+  for (const pair of pluginsPairs) {
+    plugins.transformPluginsPair(pair);
+  }
+
+  if (plugins.migrated && !plugins.retained && !blockedConfigs.size) {
+    hooks.migrateHooks();
+  }
+
+  plans.planConfigInsertions();
+  editor.finalizeRemovals();
+
+  if (!editor.hasEdits) {
+    return null;
+  }
+
+  for (const binding of [...bindings, ...companions.bindings]) {
+    if (hooks.repurposedStatements.has(binding.statement.range().start.index)) {
+      continue;
+    }
+
+    editor.removeBindingIfUnused(binding);
+  }
+
+  return editor.commit();
+}
+
+export default async function transform(root: SgRoot<Js>): Promise<string | null> {
+  const result = migrateConfiguration(root);
+  const language =
+    root.filename().endsWith(".jsx") || root.filename().endsWith(".tsx") ? "tsx" : "typescript";
+  const migrated = result === null ? root.root() : parse<Js>(language, result).root();
+
+  recordSource(root.filename(), sourcePackageReferences(migrated));
+
+  return result;
+}
diff --git a/codemods/html-plugins-to-native-html/tests/basic/expected.js b/codemods/html-plugins-to-native-html/tests/basic/expected.js
new file mode 100644
index 0000000..aaab0a3
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/basic/expected.js
@@ -0,0 +1,16 @@
+const { DefinePlugin } = require("webpack");
+
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+    filename: "[name].js",
+  },
+  plugins: [
+    new DefinePlugin({ DEBUG: "false" }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/basic/input.js b/codemods/html-plugins-to-native-html/tests/basic/input.js
new file mode 100644
index 0000000..4dfe698
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/basic/input.js
@@ -0,0 +1,13 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { DefinePlugin } = require("webpack");
+
+module.exports = {
+  entry: "./src/index.js",
+  output: {
+    filename: "[name].js",
+  },
+  plugins: [
+    new HtmlWebpackPlugin(),
+    new DefinePlugin({ DEBUG: "false" }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/csp-sri-plugins/expected.js b/codemods/html-plugins-to-native-html/tests/csp-sri-plugins/expected.js
new file mode 100644
index 0000000..4c9ad48
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/csp-sri-plugins/expected.js
@@ -0,0 +1,15 @@
+const { DefinePlugin } = require("webpack");
+
+module.exports = {
+  output: {
+    html: { title: "App", csp: { policy: { "script-src": ["'self'"] } }, integrity: ["sha384"] },
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+  plugins: [
+    new DefinePlugin({ DEBUG: "false" }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/csp-sri-plugins/input.js b/codemods/html-plugins-to-native-html/tests/csp-sri-plugins/input.js
new file mode 100644
index 0000000..a834f64
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/csp-sri-plugins/input.js
@@ -0,0 +1,14 @@
+const { DefinePlugin } = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
+const { SubresourceIntegrityPlugin } = require("webpack-subresource-integrity");
+
+module.exports = {
+  entry: "./src/index.js",
+  plugins: [
+    new HtmlWebpackPlugin({ title: "App" }),
+    new CspHtmlWebpackPlugin({ "script-src": ["'self'"] }),
+    new SubresourceIntegrityPlugin({ hashFuncNames: ["sha384"] }),
+    new DefinePlugin({ DEBUG: "false" }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/dynamic-output-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/dynamic-output-untouched/expected.js
new file mode 100644
index 0000000..a4ef5f7
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/dynamic-output-untouched/expected.js
@@ -0,0 +1,2 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = { output: getOutput(), plugins: [new HtmlWebpackPlugin()] };
diff --git a/codemods/html-plugins-to-native-html/tests/dynamic-output-untouched/input.js b/codemods/html-plugins-to-native-html/tests/dynamic-output-untouched/input.js
new file mode 100644
index 0000000..a4ef5f7
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/dynamic-output-untouched/input.js
@@ -0,0 +1,2 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = { output: getOutput(), plugins: [new HtmlWebpackPlugin()] };
diff --git a/codemods/html-plugins-to-native-html/tests/dynamic-template-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/dynamic-template-untouched/expected.js
new file mode 100644
index 0000000..651dec6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/dynamic-template-untouched/expected.js
@@ -0,0 +1,2 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = { plugins: [new HtmlWebpackPlugin({ template: getTemplate() })] };
diff --git a/codemods/html-plugins-to-native-html/tests/dynamic-template-untouched/input.js b/codemods/html-plugins-to-native-html/tests/dynamic-template-untouched/input.js
new file mode 100644
index 0000000..651dec6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/dynamic-template-untouched/input.js
@@ -0,0 +1,2 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = { plugins: [new HtmlWebpackPlugin({ template: getTemplate() })] };
diff --git a/codemods/html-plugins-to-native-html/tests/esm/expected.mjs b/codemods/html-plugins-to-native-html/tests/esm/expected.mjs
new file mode 100644
index 0000000..4c6af74
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/esm/expected.mjs
@@ -0,0 +1,10 @@
+export default {
+  output: {
+    html: { title: "App" },
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+};
diff --git a/codemods/html-plugins-to-native-html/tests/esm/input.mjs b/codemods/html-plugins-to-native-html/tests/esm/input.mjs
new file mode 100644
index 0000000..c84787b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/esm/input.mjs
@@ -0,0 +1,6 @@
+import HtmlWebpackPlugin from "html-webpack-plugin";
+
+export default {
+  entry: "./src/index.js",
+  plugins: [new HtmlWebpackPlugin({ title: "App" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/existing-native-html/expected.js b/codemods/html-plugins-to-native-html/tests/existing-native-html/expected.js
new file mode 100644
index 0000000..825909e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/existing-native-html/expected.js
@@ -0,0 +1,4 @@
+module.exports = {
+  output: /* Removed html-webpack-plugin options without a native HTML equivalent: hash (use [contenthash] in output.htmlFilename) */ { html: { favicon: "./icon.png", title: "Native title" }, htmlFilename: "native.html" },
+  experiments: { html: true },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/existing-native-html/input.js b/codemods/html-plugins-to-native-html/tests/existing-native-html/input.js
new file mode 100644
index 0000000..0fb3d27
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/existing-native-html/input.js
@@ -0,0 +1,6 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  output: { html: { title: "Native title" }, htmlFilename: "native.html" },
+  experiments: { html: true },
+  plugins: [new HtmlWebpackPlugin({ title: "Plugin title", favicon: "./icon.png", hash: true })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/favicons-dynamic-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/favicons-dynamic-untouched/expected.js
new file mode 100644
index 0000000..038078f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/favicons-dynamic-untouched/expected.js
@@ -0,0 +1,6 @@
+const Html = require("html-webpack-plugin");
+const Icons = require("favicons-webpack-plugin");
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader" }] },
+  plugins: [new Html(), new Icons({ logo: getLogo() })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/favicons-dynamic-untouched/input.js b/codemods/html-plugins-to-native-html/tests/favicons-dynamic-untouched/input.js
new file mode 100644
index 0000000..038078f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/favicons-dynamic-untouched/input.js
@@ -0,0 +1,6 @@
+const Html = require("html-webpack-plugin");
+const Icons = require("favicons-webpack-plugin");
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader" }] },
+  plugins: [new Html(), new Icons({ logo: getLogo() })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/favicons-esm/expected.mjs b/codemods/html-plugins-to-native-html/tests/favicons-esm/expected.mjs
new file mode 100644
index 0000000..600f82f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/favicons-esm/expected.mjs
@@ -0,0 +1,11 @@
+export default {
+  output: {
+    // Review: native favicon emits the source icon only; generate the required icon sizes/formats and web app manifest manually, then configure their links in output.html or the HTML template
+    // Removed favicon generator options without a native HTML equivalent: favicons
+    html: { favicon: "./logo.png" },
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/favicons-esm/input.mjs b/codemods/html-plugins-to-native-html/tests/favicons-esm/input.mjs
new file mode 100644
index 0000000..1bb26ea
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/favicons-esm/input.mjs
@@ -0,0 +1,6 @@
+import Html from "html-webpack-plugin";
+import Icons from "favicons-webpack-plugin";
+export default {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader" }] },
+  plugins: [new Html(), new Icons({ logo: "./logo.png", favicons: { appName: "App" } })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/favicons-inline/expected.js b/codemods/html-plugins-to-native-html/tests/favicons-inline/expected.js
new file mode 100644
index 0000000..5e456e3
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/favicons-inline/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  output: {
+    // Review: native favicon emits the source icon only; generate the required icon sizes/formats and web app manifest manually, then configure their links in output.html or the HTML template
+    html: { favicon: "./logo.png" },
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/favicons-inline/input.js b/codemods/html-plugins-to-native-html/tests/favicons-inline/input.js
new file mode 100644
index 0000000..5e8912e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/favicons-inline/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [new (require("html-webpack-plugin"))(), new (require("favicons-webpack-plugin"))("./logo.png")],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/function-config/expected.js b/codemods/html-plugins-to-native-html/tests/function-config/expected.js
new file mode 100644
index 0000000..ecaa64f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/function-config/expected.js
@@ -0,0 +1,10 @@
+module.exports = (env) => ({
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+});
diff --git a/codemods/html-plugins-to-native-html/tests/function-config/input.js b/codemods/html-plugins-to-native-html/tests/function-config/input.js
new file mode 100644
index 0000000..7e18221
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/function-config/input.js
@@ -0,0 +1,6 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = (env) => ({
+  entry: "./src/index.js",
+  plugins: [new HtmlWebpackPlugin()],
+});
diff --git a/codemods/html-plugins-to-native-html/tests/guarded-filter/expected.js b/codemods/html-plugins-to-native-html/tests/guarded-filter/expected.js
new file mode 100644
index 0000000..cde6509
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/guarded-filter/expected.js
@@ -0,0 +1,15 @@
+const { DefinePlugin } = require("webpack");
+
+const isProd = process.env.NODE_ENV === "production";
+
+module.exports = {
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+  plugins: [new DefinePlugin({ DEBUG: "false" })].filter(Boolean),
+};
diff --git a/codemods/html-plugins-to-native-html/tests/guarded-filter/input.js b/codemods/html-plugins-to-native-html/tests/guarded-filter/input.js
new file mode 100644
index 0000000..de3d6ed
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/guarded-filter/input.js
@@ -0,0 +1,9 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { DefinePlugin } = require("webpack");
+
+const isProd = process.env.NODE_ENV === "production";
+
+module.exports = {
+  entry: "./src/index.js",
+  plugins: [isProd && new HtmlWebpackPlugin(), new DefinePlugin({ DEBUG: "false" })].filter(Boolean),
+};
diff --git a/codemods/html-plugins-to-native-html/tests/hooks-destructured/expected.js b/codemods/html-plugins-to-native-html/tests/hooks-destructured/expected.js
new file mode 100644
index 0000000..4df2c60
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/hooks-destructured/expected.js
@@ -0,0 +1,10 @@
+const { html } = require("webpack");
+// Review: transformHtml receives (html, { outputName }) and must return the html string
+// Review: htmlEmitted receives ({ outputName }); nothing to return
+const { transformHtml: beforeEmit, htmlEmitted: done } = html.HtmlModulesPlugin.getCompilationHooks(compilation);
+module.exports = { output: {
+  html: true,
+  htmlFilename: "index.html",
+}, experiments: {
+  html: true,
+}, };
diff --git a/codemods/html-plugins-to-native-html/tests/hooks-destructured/input.js b/codemods/html-plugins-to-native-html/tests/hooks-destructured/input.js
new file mode 100644
index 0000000..e80e567
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/hooks-destructured/input.js
@@ -0,0 +1,3 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { beforeEmit, afterEmit: done } = HtmlWebpackPlugin.getHooks(compilation);
+module.exports = { plugins: [new HtmlWebpackPlugin()] };
diff --git a/codemods/html-plugins-to-native-html/tests/hooks-migrated/expected.js b/codemods/html-plugins-to-native-html/tests/hooks-migrated/expected.js
new file mode 100644
index 0000000..eaf7690
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/hooks-migrated/expected.js
@@ -0,0 +1,20 @@
+const { html } = require("webpack");
+
+class MyPlugin {
+  apply(compiler) {
+    compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
+      html.HtmlModulesPlugin.getCompilationHooks(compilation).transformHtml.tapAsync("MyPlugin", (data, callback) => callback(null, data)); /* Review: transformHtml receives (html, { outputName }) and must return the html string */
+    });
+  }
+}
+
+module.exports = {
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  plugins: [new MyPlugin()],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/hooks-migrated/input.js b/codemods/html-plugins-to-native-html/tests/hooks-migrated/input.js
new file mode 100644
index 0000000..26ab525
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/hooks-migrated/input.js
@@ -0,0 +1,13 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+class MyPlugin {
+  apply(compiler) {
+    compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
+      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync("MyPlugin", (data, callback) => callback(null, data));
+    });
+  }
+}
+
+module.exports = {
+  plugins: [new HtmlWebpackPlugin(), new MyPlugin()],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/hooks-unmappable-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/hooks-unmappable-untouched/expected.js
new file mode 100644
index 0000000..52f7d86
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/hooks-unmappable-untouched/expected.js
@@ -0,0 +1,13 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+class MyPlugin {
+  apply(compiler) {
+    compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
+      HtmlWebpackPlugin.getHooks(compilation).afterTemplateExecution.tapAsync("MyPlugin", (data, callback) => callback(null, data));
+    });
+  }
+}
+
+module.exports = {
+  plugins: [new HtmlWebpackPlugin(), new MyPlugin()],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/hooks-unmappable-untouched/input.js b/codemods/html-plugins-to-native-html/tests/hooks-unmappable-untouched/input.js
new file mode 100644
index 0000000..52f7d86
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/hooks-unmappable-untouched/input.js
@@ -0,0 +1,13 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+class MyPlugin {
+  apply(compiler) {
+    compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
+      HtmlWebpackPlugin.getHooks(compilation).afterTemplateExecution.tapAsync("MyPlugin", (data, callback) => callback(null, data));
+    });
+  }
+}
+
+module.exports = {
+  plugins: [new HtmlWebpackPlugin(), new MyPlugin()],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/hooks-unrelated-properties/expected.js b/codemods/html-plugins-to-native-html/tests/hooks-unrelated-properties/expected.js
new file mode 100644
index 0000000..3ee7e66
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/hooks-unrelated-properties/expected.js
@@ -0,0 +1,10 @@
+const { html } = require("webpack");
+const other = { beforeEmit: true, beforeAssetTagGeneration: true };
+const { beforeEmit } = other;
+html.HtmlModulesPlugin.getCompilationHooks(compilation).transformHtml.tap("Example", (data) => data); /* Review: transformHtml receives (html, { outputName }) and must return the html string */
+module.exports = { output: {
+  html: true,
+  htmlFilename: "index.html",
+}, experiments: {
+  html: true,
+}, };
diff --git a/codemods/html-plugins-to-native-html/tests/hooks-unrelated-properties/input.js b/codemods/html-plugins-to-native-html/tests/hooks-unrelated-properties/input.js
new file mode 100644
index 0000000..a5c7ff1
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/hooks-unrelated-properties/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const other = { beforeEmit: true, beforeAssetTagGeneration: true };
+const { beforeEmit } = other;
+HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tap("Example", (data) => data);
+module.exports = { plugins: [new HtmlWebpackPlugin()] };
diff --git a/codemods/html-plugins-to-native-html/tests/inline-hooks/expected.js b/codemods/html-plugins-to-native-html/tests/inline-hooks/expected.js
new file mode 100644
index 0000000..9ca0341
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/inline-hooks/expected.js
@@ -0,0 +1,8 @@
+const { html } = require("webpack");
+class Plugin { apply(compiler) { compiler.hooks.compilation.tap("Plugin", c => { html.HtmlModulesPlugin.getCompilationHooks(c).transformHtml.tap("Plugin", data => data); /* Review: transformHtml receives (html, { outputName }) and must return the html string */ }); } }
+module.exports = { output: {
+  html: true,
+  htmlFilename: "index.html",
+}, experiments: {
+  html: true,
+}, plugins: [new Plugin()] };
diff --git a/codemods/html-plugins-to-native-html/tests/inline-hooks/input.js b/codemods/html-plugins-to-native-html/tests/inline-hooks/input.js
new file mode 100644
index 0000000..50b0481
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/inline-hooks/input.js
@@ -0,0 +1,3 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+class Plugin { apply(compiler) { compiler.hooks.compilation.tap("Plugin", c => { HtmlWebpackPlugin.getHooks(c).beforeEmit.tap("Plugin", data => data); }); } }
+module.exports = { plugins: [new HtmlWebpackPlugin(), new Plugin()] };
diff --git a/codemods/html-plugins-to-native-html/tests/inline-lost-options/expected.js b/codemods/html-plugins-to-native-html/tests/inline-lost-options/expected.js
new file mode 100644
index 0000000..f6c4ecf
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/inline-lost-options/expected.js
@@ -0,0 +1,3 @@
+module.exports = { experiments: {
+  html: true,
+}, output: { /* Removed html-webpack-plugin options without a native HTML equivalent: minify (configure optimization.minimizeOptions.html) */ html: true, htmlFilename: "index.html" } };
diff --git a/codemods/html-plugins-to-native-html/tests/inline-lost-options/input.js b/codemods/html-plugins-to-native-html/tests/inline-lost-options/input.js
new file mode 100644
index 0000000..ab0b88c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/inline-lost-options/input.js
@@ -0,0 +1,2 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = { output: {}, plugins: [new HtmlWebpackPlugin({ minify: settings })] };
diff --git a/codemods/html-plugins-to-native-html/tests/inline-require/expected.js b/codemods/html-plugins-to-native-html/tests/inline-require/expected.js
new file mode 100644
index 0000000..63dcf80
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/inline-require/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  output: {
+    html: { title: "App" },
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+};
diff --git a/codemods/html-plugins-to-native-html/tests/inline-require/input.js b/codemods/html-plugins-to-native-html/tests/inline-require/input.js
new file mode 100644
index 0000000..3f3270b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/inline-require/input.js
@@ -0,0 +1,4 @@
+module.exports = {
+  entry: "./src/index.js",
+  plugins: [new (require("html-webpack-plugin"))({ title: "App" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/package.json b/codemods/html-plugins-to-native-html/tests/integration/project/package.json
new file mode 100644
index 0000000..7923849
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/package.json
@@ -0,0 +1,7 @@
+{
+  "devDependencies": {
+    "html-webpack-plugin": "^5.6.0",
+    "html-loader": "^5.1.0",
+    "webpack": "^5.112.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-literal/package.json b/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-literal/package.json
new file mode 100644
index 0000000..49e398f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-literal/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "webpack-subresource-integrity": "^5.2.0",
+    "html-loader": "^5.1.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-literal/tooling.mjs b/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-literal/tooling.mjs
new file mode 100644
index 0000000..5369832
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-literal/tooling.mjs
@@ -0,0 +1 @@
+void import(`webpack-subresource-integrity`);
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-reference/package.json b/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-reference/package.json
new file mode 100644
index 0000000..a6d4904
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-reference/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-reference/tooling.cjs b/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-reference/tooling.cjs
new file mode 100644
index 0000000..a5efd13
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/dynamic-reference/tooling.cjs
@@ -0,0 +1 @@
+module.exports = require(process.env.HTML_TOOL);
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/inline-loader/package.json b/codemods/html-plugins-to-native-html/tests/integration/project/packages/inline-loader/package.json
new file mode 100644
index 0000000..9aec285
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/inline-loader/package.json
@@ -0,0 +1,3 @@
+{
+  "devDependencies": { "html-loader": "^5.1.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/inline-loader/view.js b/codemods/html-plugins-to-native-html/tests/integration/project/packages/inline-loader/view.js
new file mode 100644
index 0000000..62bbd6b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/inline-loader/view.js
@@ -0,0 +1,2 @@
+import page from "!!html-loader?minimize=false!./page.html";
+export default page;
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/index.html b/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/index.html
new file mode 100644
index 0000000..74f7f35
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/index.html
@@ -0,0 +1 @@
+<head><title>Title</title></head>
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/index.js b/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/index.js
new file mode 100644
index 0000000..8ca0fd6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/index.js
@@ -0,0 +1 @@
+console.log("legacy");
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/package.json b/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/package.json
new file mode 100644
index 0000000..782135a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/package.json
@@ -0,0 +1,3 @@
+{
+  "devDependencies": { "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/webpack.config.cjs b/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/webpack.config.cjs
new file mode 100644
index 0000000..eb6657e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/legacy-loader/webpack.config.cjs
@@ -0,0 +1,6 @@
+const Html = require("html-webpack-plugin");
+module.exports = {
+  entry: "./index.js",
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { postprocessor: (html) => html.replace(/Title/g, "App") } }] },
+  plugins: [new Html({ template: "./index.html" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/migrated/package.json b/codemods/html-plugins-to-native-html/tests/integration/project/packages/migrated/package.json
new file mode 100644
index 0000000..87eb5a4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/migrated/package.json
@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "favicons-webpack-plugin": "^6.0.1",
+    "webpack": "^5.112.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/migrated/webpack.config.cjs b/codemods/html-plugins-to-native-html/tests/integration/project/packages/migrated/webpack.config.cjs
new file mode 100644
index 0000000..137d08b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/migrated/webpack.config.cjs
@@ -0,0 +1,8 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
+
+// html-webpack-plugin, html-loader and favicons-webpack-plugin are migrated.
+const migrationNote = "Previously this project used html-loader and html-webpack-plugin.";
+const oldPluginName = /favicons-webpack-plugin/;
+
+module.exports = { module: { rules: [{ test: /\.html$/, loader: "html-loader" }] }, plugins: [new HtmlWebpackPlugin(), new FaviconsWebpackPlugin({ logo: "./logo.png", favicons: { appName: "App" } })] };
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/named/index.html b/codemods/html-plugins-to-native-html/tests/integration/project/packages/named/index.html
new file mode 100644
index 0000000..5f0c12f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/named/index.html
@@ -0,0 +1,3 @@
+<head>
+  <script defer src="./index.js"></script>
+</head>
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/named/index.js b/codemods/html-plugins-to-native-html/tests/integration/project/packages/named/index.js
new file mode 100644
index 0000000..702645f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/named/index.js
@@ -0,0 +1 @@
+console.log("app");
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/named/webpack.config.cjs b/codemods/html-plugins-to-native-html/tests/integration/project/packages/named/webpack.config.cjs
new file mode 100644
index 0000000..2b66326
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/named/webpack.config.cjs
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  entry: { app: "./index.js" },
+  plugins: [new HtmlWebpackPlugin({ template: "./index.html" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/references/package.json b/codemods/html-plugins-to-native-html/tests/integration/project/packages/references/package.json
new file mode 100644
index 0000000..4e6369e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/references/package.json
@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "csp-html-webpack-plugin": "^5.1.0",
+    "webpack-subresource-integrity": "^5.2.0",
+    "favicons-webpack-plugin": "^6.0.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/references/tooling.mjs b/codemods/html-plugins-to-native-html/tests/integration/project/packages/references/tooling.mjs
new file mode 100644
index 0000000..0b6bc24
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/references/tooling.mjs
@@ -0,0 +1,5 @@
+import "csp-html-webpack-plugin";
+export { default as HtmlWebpackPlugin } from "html-\u0077ebpack-plugin";
+
+const loader = require("html\x2dloader");
+const iconGenerator = require.resolve("favicons-" + "webpack-plugin/package.json");
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/packages/skipped/webpack.config.cjs b/codemods/html-plugins-to-native-html/tests/integration/project/packages/skipped/webpack.config.cjs
new file mode 100644
index 0000000..bd72e4b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/packages/skipped/webpack.config.cjs
@@ -0,0 +1,3 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = { plugins: [new HtmlWebpackPlugin(options)] };
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/src/index.html b/codemods/html-plugins-to-native-html/tests/integration/project/src/index.html
new file mode 100644
index 0000000..bda7c5f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/src/index.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <head>
+    <title>App</title>
+  </head>
+  <body><div id="root"></div></body>
+</html>
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/src/index.js b/codemods/html-plugins-to-native-html/tests/integration/project/src/index.js
new file mode 100644
index 0000000..473bda4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/src/index.js
@@ -0,0 +1 @@
+console.log("App");
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/unrelated.html b/codemods/html-plugins-to-native-html/tests/integration/project/unrelated.html
new file mode 100644
index 0000000..d6424d1
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/unrelated.html
@@ -0,0 +1 @@
+<html><head><title>Unrelated</title></head><body></body></html>
diff --git a/codemods/html-plugins-to-native-html/tests/integration/project/webpack.config.cjs b/codemods/html-plugins-to-native-html/tests/integration/project/webpack.config.cjs
new file mode 100644
index 0000000..ee1420d
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/integration/project/webpack.config.cjs
@@ -0,0 +1,6 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html", minify: false })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-dynamic-parser-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-dynamic-parser-untouched/expected.js
new file mode 100644
index 0000000..4eab8fd
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-dynamic-parser-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, parser: getParser(), loader: "html-loader", options: { sources: false } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-dynamic-parser-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-dynamic-parser-untouched/input.js
new file mode 100644
index 0000000..4eab8fd
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-dynamic-parser-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, parser: getParser(), loader: "html-loader", options: { sources: false } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-esmodule-false/expected.js b/codemods/html-plugins-to-native-html/tests/loader-esmodule-false/expected.js
new file mode 100644
index 0000000..f053ebf
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-esmodule-false/expected.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-esmodule-false/input.js b/codemods/html-plugins-to-native-html/tests/loader-esmodule-false/input.js
new file mode 100644
index 0000000..4651839
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-esmodule-false/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { esModule: false } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-existing-type-parser/expected.js b/codemods/html-plugins-to-native-html/tests/loader-existing-type-parser/expected.js
new file mode 100644
index 0000000..f5c3732
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-existing-type-parser/expected.js
@@ -0,0 +1,11 @@
+module.exports = {
+  experiments: { html: true },
+  module: {
+    rules: [{
+      test: /\.html$/,
+      parser: { sources: false, custom: true },
+      use: ["template-loader"],
+      type: "html",
+    }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-existing-type-parser/input.js b/codemods/html-plugins-to-native-html/tests/loader-existing-type-parser/input.js
new file mode 100644
index 0000000..16c5f75
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-existing-type-parser/input.js
@@ -0,0 +1,11 @@
+module.exports = {
+  experiments: { html: false },
+  module: {
+    rules: [{
+      test: /\.html$/,
+      type: "javascript/auto",
+      parser: { custom: true },
+      use: [{ loader: "html-loader", options: { sources: false } }, "template-loader"],
+    }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minify-conflict/expected.js b/codemods/html-plugins-to-native-html/tests/loader-minify-conflict/expected.js
new file mode 100644
index 0000000..0f98d74
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minify-conflict/expected.js
@@ -0,0 +1,3 @@
+module.exports = /* Review: HTML minification differs between pages or loaders; configure optimization.minimizeOptions.html for the whole compilation */ {
+  module: { rules: [] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minify-conflict/input.js b/codemods/html-plugins-to-native-html/tests/loader-minify-conflict/input.js
new file mode 100644
index 0000000..cd2eb17
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minify-conflict/input.js
@@ -0,0 +1,6 @@
+module.exports = {
+  module: { rules: [
+    { test: /\.html$/, loader: "html-loader", options: { minimize: false } },
+    { test: /\.html$/, loader: "html-loader", options: { minimize: true } },
+  ] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns-ts/expected.ts b/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns-ts/expected.ts
new file mode 100644
index 0000000..32ae825
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns-ts/expected.ts
@@ -0,0 +1,3 @@
+export default {
+  optimization: { minimizeOptions: { html: { comments: (comment: string) => [/^keep/i].some((pattern) => pattern.test(comment)), extractComments: false } } },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns-ts/input.ts b/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns-ts/input.ts
new file mode 100644
index 0000000..7299d92
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns-ts/input.ts
@@ -0,0 +1,3 @@
+export default {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { minimize: { ignoreCustomComments: [/^keep/i], removeComments: true } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns/expected.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns/expected.js
new file mode 100644
index 0000000..16ebea9
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: { comments: (comment) => [/^keep/i, /@license/].some((pattern) => pattern.test(comment)), extractComments: false } } },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns/input.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns/input.js
new file mode 100644
index 0000000..02ae4b4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-comment-patterns/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { minimize: { removeComments: true, ignoreCustomComments: [/^keep/i, /@license/] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-false/expected.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-false/expected.js
new file mode 100644
index 0000000..1e0a918
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-false/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: false } },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-false/input.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-false/input.js
new file mode 100644
index 0000000..e8e4c1c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-false/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { minimize: false } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-inactive-whitespace/expected.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-inactive-whitespace/expected.js
new file mode 100644
index 0000000..6bd789b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-inactive-whitespace/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: { collapseWhitespace: false } } },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-inactive-whitespace/input.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-inactive-whitespace/input.js
new file mode 100644
index 0000000..4e29e8a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-inactive-whitespace/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { minimize: { collapseWhitespace: false, conservativeCollapse: false } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-options/expected.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-options/expected.js
new file mode 100644
index 0000000..be02f2f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-options/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: { comments: true, extractComments: false }, javascript: false } },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-options/input.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-options/input.js
new file mode 100644
index 0000000..190f28d
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-options/input.js
@@ -0,0 +1,4 @@
+module.exports = {
+  optimization: { minimizeOptions: { javascript: false } },
+  module: { rules: [{ test: /\.html$/, use: [{ loader: "html-loader", options: { minimize: { removeComments: false } } }] }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-unsupported-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-unsupported-untouched/expected.js
new file mode 100644
index 0000000..0e1c789
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-unsupported-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { minimize: { minifyJS: false, minifyCSS: (css) => css } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-unsupported-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-unsupported-untouched/input.js
new file mode 100644
index 0000000..0e1c789
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-unsupported-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { minimize: { minifyJS: false, minifyCSS: (css) => css } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-whitespace/expected.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-whitespace/expected.js
new file mode 100644
index 0000000..92bb34e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-whitespace/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: { collapseWhitespace: "all" } } },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-minimize-whitespace/input.js b/codemods/html-plugins-to-native-html/tests/loader-minimize-whitespace/input.js
new file mode 100644
index 0000000..9a9d8f3
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-minimize-whitespace/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { minimize: { conservativeCollapse: false, collapseWhitespace: true } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-only/expected.js b/codemods/html-plugins-to-native-html/tests/loader-only/expected.js
new file mode 100644
index 0000000..f053ebf
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-only/expected.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-only/input.js b/codemods/html-plugins-to-native-html/tests/loader-only/input.js
new file mode 100644
index 0000000..b3e1a7f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-only/input.js
@@ -0,0 +1,10 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        use: ["html-loader"],
+      },
+    ],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-options.test.mjs b/codemods/html-plugins-to-native-html/tests/loader-options.test.mjs
new file mode 100644
index 0000000..ba37b1b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-options.test.mjs
@@ -0,0 +1,54 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+
+export function fixture(name, file = "expected.js") {
+  const module = { exports: {} };
+  const code = readFileSync(new URL(`./${name}/${file}`, import.meta.url), "utf8");
+  new Function("module", code.replace("export default", "module.exports ="))(module);
+  return module.exports.module.rules[0];
+}
+
+test("source filter adapter preserves attribute decisions and captured bindings", () => {
+  for (const name of ["loader-sources-filter", "loader-sources-attributes-filter", "loader-sources-filter-capture"]) {
+    const oldFilter = fixture(name, "input.js").options.sources.list.at(-1).filter;
+    const newFilter = fixture(name).parser.sources.at(-1).filter;
+    for (const attrs of [[], [{ name: "data-local", value: "yes" }], [{ name: "data-local", value: "no" }]]) {
+      assert.equal(newFilter(new Map(attrs.map(({ name, value }) => [name, value])), "./image.png"), oldFilter("img", "src", attrs, "/src/index.html"));
+    }
+  }
+});
+
+test("URL filter adapter receives individual normalized src values", () => {
+  const oldFilter = fixture("loader-sources-url-filter-explicit", "input.mjs").options.sources.urlFilter;
+  const newFilter = fixture("loader-sources-url-filter-explicit", "expected.mjs").parser.sources[0].filter;
+  for (const [raw, normalized] of [["./image.png", "./image.png"], [" /external.png \n", "/external.png"], ["\u0001/local.png\u00a0", "/local.png"]]) {
+    assert.equal(newFilter(new Map(), raw), oldFilter("src", normalized, "/src/index.html"));
+  }
+});
+
+test("template context migration preserves resource parts, including escaped delimiters", () => {
+  const before = fixture("loader-preprocessor-resource-parts", "input.js").options.preprocessor;
+  const after = fixture("loader-preprocessor-resource-parts").parser.template;
+  for (const [resource, resourcePath, resourceQuery, resourceFragment] of [
+    ["/src/index.html", "/src/index.html", "", ""],
+    ["/src/index.html?theme=dark#top", "/src/index.html", "?theme=dark", "#top"],
+    ["/src/a\0?b.html?theme\0#dark#top", "/src/a?b.html", "?theme#dark", "#top"],
+  ]) {
+    assert.equal(after("HTML", { resource, module: { context: "/src" } }), before("HTML", { resource, resourcePath, resourceQuery, resourceFragment, context: "/src" }));
+  }
+});
+
+test("template migration preserves dependency registration and warnings", () => {
+  const before = fixture("loader-preprocessor-dependencies", "input.js").options.preprocessor;
+  const after = fixture("loader-preprocessor-dependencies").parser.template;
+  const invoke = (fn) => {
+    const events = [];
+    const html = fn("  <p>HTML</p>  ", {
+      addDependency: (file) => events.push(["dependency", file]),
+      emitWarning: (error) => events.push(["warning", error.message]),
+    });
+    return { html, events };
+  };
+  assert.deepEqual(invoke(after), invoke(before));
+});
diff --git a/codemods/html-plugins-to-native-html/tests/loader-other-extensions/expected.js b/codemods/html-plugins-to-native-html/tests/loader-other-extensions/expected.js
new file mode 100644
index 0000000..4784de4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-other-extensions/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html?$/, type: "html" }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-other-extensions/input.js b/codemods/html-plugins-to-native-html/tests/loader-other-extensions/input.js
new file mode 100644
index 0000000..884d993
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-other-extensions/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html?$/, loader: "html-loader" }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-parser-equivalent-syntax/expected.js b/codemods/html-plugins-to-native-html/tests/loader-parser-equivalent-syntax/expected.js
new file mode 100644
index 0000000..2ea3f69
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-parser-equivalent-syntax/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, parser: { sources: [ /* existing */ { attribute: 'src', type: 'src' } ] }, type: "html" }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-parser-equivalent-syntax/input.js b/codemods/html-plugins-to-native-html/tests/loader-parser-equivalent-syntax/input.js
new file mode 100644
index 0000000..970d990
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-parser-equivalent-syntax/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, parser: { sources: [ /* existing */ { attribute: 'src', type: 'src' } ] }, loader: "html-loader", options: { sources: { list: [{ attribute: "src", type: "src" }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-postprocessor-async-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-postprocessor-async-untouched/expected.js
new file mode 100644
index 0000000..6b463c8
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-postprocessor-async-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { postprocessor: async (content) => content } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-postprocessor-async-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-postprocessor-async-untouched/input.js
new file mode 100644
index 0000000..6b463c8
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-postprocessor-async-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { postprocessor: async (content) => content } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-postprocessor-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-postprocessor-untouched/expected.js
new file mode 100644
index 0000000..5bc550d
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-postprocessor-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { postprocessor: (content) => content.replace(/title/g, "heading") } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-postprocessor-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-postprocessor-untouched/input.js
new file mode 100644
index 0000000..5bc550d
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-postprocessor-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { postprocessor: (content) => content.replace(/title/g, "heading") } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-async-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-async-untouched/expected.js
new file mode 100644
index 0000000..bd27761
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-async-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: async (content) => content } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-async-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-async-untouched/input.js
new file mode 100644
index 0000000..bd27761
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-async-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: async (content) => content } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-alias-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-alias-untouched/expected.js
new file mode 100644
index 0000000..f2a9f24
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-alias-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context) => { const alias = context; return content; } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-alias-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-alias-untouched/input.js
new file mode 100644
index 0000000..f2a9f24
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-alias-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context) => { const alias = context; return content; } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-typescript/expected.ts b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-typescript/expected.ts
new file mode 100644
index 0000000..e19fa5f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-typescript/expected.ts
@@ -0,0 +1,6 @@
+export default {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { template: (content: string, context: { addDependency: (dependency: string) => void; resource: string }): string => { context.addDependency("./partial.html"); return content.replace("RESOURCE", context.resource.replace(/^((?:\0.|[^?#\0])*)(\?(?:\0.|[^#\0])*)?(#.*)?$/, "$1").replace(/\0(.)/g, "$1")); } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-typescript/input.ts b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-typescript/input.ts
new file mode 100644
index 0000000..ecd8fcc
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context-typescript/input.ts
@@ -0,0 +1,3 @@
+export default {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content: string, context: { resourcePath: string; addDependency: (path: string) => void }): string => { context.addDependency("./partial.html"); return content.replace("RESOURCE", context.resourcePath); } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context/expected.js
new file mode 100644
index 0000000..5cbf854
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { template: (content, context) => content.replace("RESOURCE", context.resource.replace(/^((?:\0.|[^?#\0])*)(\?(?:\0.|[^#\0])*)?(#.*)?$/, "$1").replace(/\0(.)/g, "$1")) } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context/input.js
new file mode 100644
index 0000000..e9cc09a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-context/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context) => content.replace("RESOURCE", context.resourcePath) } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-default-argument-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-default-argument-untouched/expected.js
new file mode 100644
index 0000000..3413c28
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-default-argument-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context = getContext()) => content } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-default-argument-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-default-argument-untouched/input.js
new file mode 100644
index 0000000..3413c28
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-default-argument-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context = getContext()) => content } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-dependencies/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-dependencies/expected.js
new file mode 100644
index 0000000..d670ec6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-dependencies/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { template: (content, context) => { context.addDependency("./partial.html"); context.emitWarning(new Error("template warning")); return content.trim(); } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-dependencies/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-dependencies/input.js
new file mode 100644
index 0000000..1022ef3
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-dependencies/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context) => { context.addDependency("./partial.html"); context.emitWarning(new Error("template warning")); return content.trim(); } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-function/expected.mjs b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-function/expected.mjs
new file mode 100644
index 0000000..a71a60b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-function/expected.mjs
@@ -0,0 +1,6 @@
+export default {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { template: function (content) { const html = content.replace("TITLE", "App"); return html; } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-function/input.mjs b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-function/input.mjs
new file mode 100644
index 0000000..5ee7488
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-function/input.mjs
@@ -0,0 +1,3 @@
+export default {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: function (content) { const html = content.replace("TITLE", "App"); return html; } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-mutation-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-mutation-untouched/expected.js
new file mode 100644
index 0000000..9ae1389
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-mutation-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content) => { content = Promise.resolve(content); return content; } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-mutation-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-mutation-untouched/input.js
new file mode 100644
index 0000000..9ae1389
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-mutation-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content) => { content = Promise.resolve(content); return content; } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-promise-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-promise-untouched/expected.js
new file mode 100644
index 0000000..1ef91da
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-promise-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content) => Promise.resolve(content) } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-promise-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-promise-untouched/input.js
new file mode 100644
index 0000000..1ef91da
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-promise-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content) => Promise.resolve(content) } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-replace/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-replace/expected.js
new file mode 100644
index 0000000..db9f2e1
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-replace/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { template: (content) => content.replace(/TITLE/g, "App").trim() } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-replace/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-replace/input.js
new file mode 100644
index 0000000..8d78e11
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-replace/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content) => content.replace(/TITLE/g, "App").trim() } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resolver-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resolver-untouched/expected.js
new file mode 100644
index 0000000..f415a36
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resolver-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context) => content.replace("RESOURCE", context.resolve("./index.html")) } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resolver-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resolver-untouched/input.js
new file mode 100644
index 0000000..f415a36
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resolver-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context) => content.replace("RESOURCE", context.resolve("./index.html")) } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resource-parts/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resource-parts/expected.js
new file mode 100644
index 0000000..c0e1b5e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resource-parts/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { template: (content, context) => `${context.resource.replace(/^((?:\0.|[^?#\0])*)(\?(?:\0.|[^#\0])*)?(#.*)?$/, "$1").replace(/\0(.)/g, "$1")}|${(context.resource.match(/^((?:\0.|[^?#\0])*)(\?(?:\0.|[^#\0])*)?(#.*)?$/)?.[2]?.replace(/\0(.)/g, "$1") ?? "")}|${(context.resource.match(/^((?:\0.|[^?#\0])*)(\?(?:\0.|[^#\0])*)?(#.*)?$/)?.[3] ?? "")}|${context.module.context}` } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resource-parts/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resource-parts/input.js
new file mode 100644
index 0000000..e94b9e1
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-resource-parts/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context) => `${context.resourcePath}|${context.resourceQuery}|${context.resourceFragment}|${context.context}` } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-this-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-this-untouched/expected.js
new file mode 100644
index 0000000..02643ec
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-this-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: function (content) { return content.replace("VALUE", this.getOptions().value); } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-this-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-this-untouched/input.js
new file mode 100644
index 0000000..02643ec
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-this-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: function (content) { return content.replace("VALUE", this.getOptions().value); } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-trivia/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-trivia/expected.js
new file mode 100644
index 0000000..86929eb
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-trivia/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html",
+  parser: { template: (content, context) => {
+    const/* keep this comment */result = content.trim();
+    return result + context /* original resource */ . resource;
+  } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-trivia/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-trivia/input.js
new file mode 100644
index 0000000..55fa130
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-trivia/input.js
@@ -0,0 +1,6 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content, context) => {
+    const/* keep this comment */result = content.trim();
+    return result + context /* original resource */ . resource;
+  } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-typescript/expected.ts b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-typescript/expected.ts
new file mode 100644
index 0000000..63352a9
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-typescript/expected.ts
@@ -0,0 +1,6 @@
+export default {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { template: (content: string): string => `<main>${content}</main>` } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-typescript/input.ts b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-typescript/input.ts
new file mode 100644
index 0000000..398790a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-typescript/input.ts
@@ -0,0 +1,3 @@
+export default {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content: string): string => `<main>${content}</main>` } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-unknown-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-unknown-untouched/expected.js
new file mode 100644
index 0000000..ebcf9e0
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-unknown-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content) => render(content) } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor-unknown-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-unknown-untouched/input.js
new file mode 100644
index 0000000..ebcf9e0
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor-unknown-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { preprocessor: (content) => render(content) } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor/expected.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor/expected.js
new file mode 100644
index 0000000..ff56f1a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor/expected.js
@@ -0,0 +1,13 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: { comments: false } } },
+  module: {
+    rules: [
+      {
+        test: /\.md$/,
+        use: ["markdown-loader"],
+        type: "html",
+        parser: { template: (content) => content },
+      },
+    ],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-preprocessor/input.js b/codemods/html-plugins-to-native-html/tests/loader-preprocessor/input.js
new file mode 100644
index 0000000..872234f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-preprocessor/input.js
@@ -0,0 +1,20 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.md$/,
+        use: [
+          {
+            loader: "html-loader",
+            options: {
+              preprocessor: (content) => content,
+              postprocessor: (content) => content,
+              minimize: { removeComments: true },
+            },
+          },
+          "markdown-loader",
+        ],
+      },
+    ],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-attributes-filter/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-attributes-filter/expected.js
new file mode 100644
index 0000000..099cc38
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-attributes-filter/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { parser: { html: { sources: ["..."] } }, rules: [{ test: /\.html$/, type: "html", parser: { sources: ["...", { tag: "img", attribute: "src", type: "src", filter: (htmlAttributes) => ((tag, attribute, attrs) => attrs.some((item) => item.name === "data-local" && item.value === "yes"))("img", "src", Array.from(htmlAttributes, ([name, value]) => ({ name, value }))) }] } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-attributes-filter/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-attributes-filter/input.js
new file mode 100644
index 0000000..285d6a1
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-attributes-filter/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["...", { tag: "img", attribute: "src", type: "src", filter: (tag, attribute, attrs) => attrs.some((item) => item.name === "data-local" && item.value === "yes") }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-computed-metadata-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-computed-metadata-untouched/expected.js
new file mode 100644
index 0000000..ce08d45
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-computed-metadata-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "src", type: "src", filter: (tag, attribute, attrs) => attrs.some((item) => item["name" + "space"]) }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-computed-metadata-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-computed-metadata-untouched/input.js
new file mode 100644
index 0000000..ce08d45
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-computed-metadata-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "src", type: "src", filter: (tag, attribute, attrs) => attrs.some((item) => item["name" + "space"]) }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-conflict-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-conflict-untouched/expected.js
new file mode 100644
index 0000000..4552c7a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-conflict-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, parser: { sources: false }, loader: "html-loader", options: { sources: { list: ["..."] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-conflict-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-conflict-untouched/input.js
new file mode 100644
index 0000000..4552c7a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-conflict-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, parser: { sources: false }, loader: "html-loader", options: { sources: { list: ["..."] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-dynamic-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-dynamic-untouched/expected.js
new file mode 100644
index 0000000..a9699fc
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-dynamic-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: getSources() } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-dynamic-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-dynamic-untouched/input.js
new file mode 100644
index 0000000..a9699fc
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-dynamic-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: getSources() } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-empty/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-empty/expected.js
new file mode 100644
index 0000000..6030ba4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-empty/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { sources: [] } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-empty/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-empty/input.js
new file mode 100644
index 0000000..c1c3c74
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-empty/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter-capture/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-capture/expected.js
new file mode 100644
index 0000000..242dbec
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-capture/expected.js
@@ -0,0 +1,7 @@
+const htmlAttributes = true;
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { sources: [{ tag: "img", attribute: "src", type: "src", filter: (htmlAttributes_) => (() => htmlAttributes)() }] } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter-capture/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-capture/input.js
new file mode 100644
index 0000000..b219e1e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-capture/input.js
@@ -0,0 +1,4 @@
+const htmlAttributes = true;
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "src", type: "src", filter: () => htmlAttributes }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter-comments/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-comments/expected.js
new file mode 100644
index 0000000..f22cc74
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-comments/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { sources: [{ tag: "img", attribute: "src", type: "src", filter: (htmlAttributes) => ((tag, attribute, attrs) => /* namespace prefix htmlAttributes */ attrs.some((item) => item.name === "data-local"))("img", "src", Array.from(htmlAttributes, ([name, value]) => ({ name, value }))) }] } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter-comments/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-comments/input.js
new file mode 100644
index 0000000..a1a12ce
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-comments/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "src", type: "src", filter: (tag, attribute, attrs) => /* namespace prefix htmlAttributes */ attrs.some((item) => item.name === "data-local") }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter-resource-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-resource-untouched/expected.js
new file mode 100644
index 0000000..584a006
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-resource-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "src", type: "src", filter: (tag, attr, attrs, resource) => resource.endsWith("index.html") }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter-resource-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-resource-untouched/input.js
new file mode 100644
index 0000000..584a006
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-resource-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "src", type: "src", filter: (tag, attr, attrs, resource) => resource.endsWith("index.html") }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter-typescript/expected.ts b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-typescript/expected.ts
new file mode 100644
index 0000000..d5282ed
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-typescript/expected.ts
@@ -0,0 +1,6 @@
+export default {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { sources: [{ tag: "img", attribute: "src", type: "src", filter: (htmlAttributes: Map<string, string>) => ((tag: string) => tag === "img")("img") }] } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter-typescript/input.ts b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-typescript/input.ts
new file mode 100644
index 0000000..dbee2e6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter-typescript/input.ts
@@ -0,0 +1,3 @@
+export default {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "src", type: "src", filter: (tag: string) => tag === "img" }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-filter/expected.js
new file mode 100644
index 0000000..72f4f0e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { sources: [{ tag: "img", attribute: "src", type: "src", filter: (htmlAttributes) => ((tag) => tag !== "img")("img") }] } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-filter/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-filter/input.js
new file mode 100644
index 0000000..f67cb19
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-filter/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "src", type: "src", filter: (tag) => tag !== "img" }] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-global-custom-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-global-custom-untouched/expected.js
new file mode 100644
index 0000000..0654333
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-global-custom-untouched/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  module: {
+    parser: { html: { sources: [{ tag: "img", attribute: "custom", type: "src" }], urlHints: false } },
+    rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["...", { tag: "img", attribute: "data-src", type: "src" }] } } }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-global-custom-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-global-custom-untouched/input.js
new file mode 100644
index 0000000..0654333
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-global-custom-untouched/input.js
@@ -0,0 +1,6 @@
+module.exports = {
+  module: {
+    parser: { html: { sources: [{ tag: "img", attribute: "custom", type: "src" }], urlHints: false } },
+    rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["...", { tag: "img", attribute: "data-src", type: "src" }] } } }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-global-defaults/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-global-defaults/expected.js
new file mode 100644
index 0000000..04ccaf7
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-global-defaults/expected.js
@@ -0,0 +1,9 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: {
+    parser: { html: { sources: ["..."], urlHints: false } },
+    rules: [{ test: /\.html$/, type: "html", parser: { sources: ["...", { tag: "img", attribute: "data-src", type: "src" }] } }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-global-defaults/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-global-defaults/input.js
new file mode 100644
index 0000000..42d448c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-global-defaults/input.js
@@ -0,0 +1,6 @@
+module.exports = {
+  module: {
+    parser: { html: { sources: true, urlHints: false } },
+    rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["...", { tag: "img", attribute: "data-src", type: "src" }] } } }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-global-disabled-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-global-disabled-untouched/expected.js
new file mode 100644
index 0000000..bf75dd8
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-global-disabled-untouched/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  module: {
+    parser: { html: { sources: false, urlHints: false } },
+    rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["...", { tag: "img", attribute: "data-src", type: "src" }] } } }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-global-disabled-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-global-disabled-untouched/input.js
new file mode 100644
index 0000000..bf75dd8
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-global-disabled-untouched/input.js
@@ -0,0 +1,6 @@
+module.exports = {
+  module: {
+    parser: { html: { sources: false, urlHints: false } },
+    rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["...", { tag: "img", attribute: "data-src", type: "src" }] } } }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-list-esm/expected.mjs b/codemods/html-plugins-to-native-html/tests/loader-sources-list-esm/expected.mjs
new file mode 100644
index 0000000..d5abeed
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-list-esm/expected.mjs
@@ -0,0 +1,13 @@
+export default {
+  experiments: {
+    html: true,
+  },
+  module: {
+    rules: [{
+      test: /\.html$/,
+      use: ["template-loader"],
+      type: "html",
+      parser: { sources: [{ attribute: "data-src", type: "src" }], urlHints: false },
+    }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-list-esm/input.mjs b/codemods/html-plugins-to-native-html/tests/loader-sources-list-esm/input.mjs
new file mode 100644
index 0000000..8018f42
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-list-esm/input.mjs
@@ -0,0 +1,9 @@
+export default {
+  module: {
+    rules: [{
+      test: /\.html$/,
+      use: [{ loader: "html-loader", options: { sources: { list: [{ attribute: "data-src", type: "src" }] } } }, "template-loader"],
+      parser: { urlHints: false },
+    }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-list/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-list/expected.js
new file mode 100644
index 0000000..9e709a3
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-list/expected.js
@@ -0,0 +1,13 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: {
+    parser: { html: { sources: ["..."] } },
+    rules: [{
+      test: /\.html$/,
+      type: "html",
+      parser: { sources: ["...", { tag: "img", attribute: "data-src", type: "src" }, { tag: "img", attribute: "data-srcset", type: "srcset" }] },
+    }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-list/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-list/input.js
new file mode 100644
index 0000000..968f7aa
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-list/input.js
@@ -0,0 +1,9 @@
+module.exports = {
+  module: {
+    rules: [{
+      test: /\.html$/,
+      loader: "html-loader",
+      options: { sources: { list: ["...", { tag: "img", attribute: "data-src", type: "src" }, { tag: "img", attribute: "data-srcset", type: "srcset" }] } },
+    }],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-default/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-default/expected.js
new file mode 100644
index 0000000..4c8e59b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-default/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { sources: true } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-default/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-default/input.js
new file mode 100644
index 0000000..a91f664
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-default/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { scriptingEnabled: true } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-untouched/expected.js
new file mode 100644
index 0000000..be622da
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["..."], scriptingEnabled: false } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-untouched/input.js
new file mode 100644
index 0000000..be622da
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-scripting-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["..."], scriptingEnabled: false } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-spread-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-spread-untouched/expected.js
new file mode 100644
index 0000000..4164bff
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-spread-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [...customSources] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-spread-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-spread-untouched/input.js
new file mode 100644
index 0000000..4164bff
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-spread-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [...customSources] } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-disabled/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-disabled/expected.js
new file mode 100644
index 0000000..6a430c0
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-disabled/expected.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { sources: false } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-disabled/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-disabled/input.js
new file mode 100644
index 0000000..2d08741
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-disabled/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { urlFilter: () => false } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-explicit/expected.mjs b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-explicit/expected.mjs
new file mode 100644
index 0000000..446b13d
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-explicit/expected.mjs
@@ -0,0 +1,6 @@
+export default {
+  experiments: {
+    html: true,
+  },
+  module: { rules: [{ test: /\.html$/, type: "html", parser: { sources: [{ tag: "img", attribute: "src", type: "src", filter: (htmlAttributes, htmlUrl) => ((attribute, value) => !value.startsWith("/"))("src", htmlUrl.replace(/^[\t\n\f\r ]+|[\t\n\f\r ]+$/g, "").replace(/^[\u0001-\u0019\u00a0]+|[\u0001-\u0019\u00a0]+$/g, "")) }] } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-explicit/input.mjs b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-explicit/input.mjs
new file mode 100644
index 0000000..c4344a1
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-explicit/input.mjs
@@ -0,0 +1,3 @@
+export default {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "src", type: "src" }], urlFilter: (attribute, value) => !value.startsWith("/") } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-srcset-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-srcset-untouched/expected.js
new file mode 100644
index 0000000..fa777ed
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-srcset-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "srcset", type: "srcset" }], urlFilter: (attribute, value) => !value.startsWith("/") } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-srcset-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-srcset-untouched/input.js
new file mode 100644
index 0000000..fa777ed
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-srcset-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: [{ tag: "img", attribute: "srcset", type: "srcset" }], urlFilter: (attribute, value) => !value.startsWith("/") } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-untouched/expected.js
new file mode 100644
index 0000000..3027827
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-untouched/expected.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["..."], urlFilter: (attribute, value) => !value.startsWith("/") } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-untouched/input.js
new file mode 100644
index 0000000..3027827
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-sources-url-filter-untouched/input.js
@@ -0,0 +1,3 @@
+module.exports = {
+  module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { sources: { list: ["..."], urlFilter: (attribute, value) => !value.startsWith("/") } } }] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-unsupported-config-isolation/expected.mjs b/codemods/html-plugins-to-native-html/tests/loader-unsupported-config-isolation/expected.mjs
new file mode 100644
index 0000000..497c4af
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-unsupported-config-isolation/expected.mjs
@@ -0,0 +1,10 @@
+import Html from "html-webpack-plugin";
+export default [
+  { module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { postprocessor: (html) => html.replace(/App/g, "Title") } }] }, plugins: [new Html()] },
+  { output: {
+  html: true,
+  htmlFilename: "index.html",
+}, experiments: {
+  html: true,
+}, },
+];
diff --git a/codemods/html-plugins-to-native-html/tests/loader-unsupported-config-isolation/input.mjs b/codemods/html-plugins-to-native-html/tests/loader-unsupported-config-isolation/input.mjs
new file mode 100644
index 0000000..172dc67
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-unsupported-config-isolation/input.mjs
@@ -0,0 +1,5 @@
+import Html from "html-webpack-plugin";
+export default [
+  { module: { rules: [{ test: /\.html$/, loader: "html-loader", options: { postprocessor: (html) => html.replace(/App/g, "Title") } }] }, plugins: [new Html()] },
+  { module: { rules: [{ test: /\.html$/, loader: "html-loader" }] }, plugins: [new Html()] },
+];
diff --git a/codemods/html-plugins-to-native-html/tests/loader-unsupported-plugin-config-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/loader-unsupported-plugin-config-untouched/expected.js
new file mode 100644
index 0000000..ecc2f2a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-unsupported-plugin-config-untouched/expected.js
@@ -0,0 +1,9 @@
+const Html = require("html-webpack-plugin");
+module.exports = {
+  entry: "./src/index.js",
+  module: { rules: [
+    { test: /\.html$/, loader: "html-loader" },
+    { test: /\.other.html$/, loader: "html-loader", options: { postprocessor: (html) => html.replace(/App/g, "Title") } },
+  ] },
+  plugins: [new Html({ template: "./src/index.html" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-unsupported-plugin-config-untouched/input.js b/codemods/html-plugins-to-native-html/tests/loader-unsupported-plugin-config-untouched/input.js
new file mode 100644
index 0000000..ecc2f2a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-unsupported-plugin-config-untouched/input.js
@@ -0,0 +1,9 @@
+const Html = require("html-webpack-plugin");
+module.exports = {
+  entry: "./src/index.js",
+  module: { rules: [
+    { test: /\.html$/, loader: "html-loader" },
+    { test: /\.other.html$/, loader: "html-loader", options: { postprocessor: (html) => html.replace(/App/g, "Title") } },
+  ] },
+  plugins: [new Html({ template: "./src/index.html" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-with-options/expected.js b/codemods/html-plugins-to-native-html/tests/loader-with-options/expected.js
new file mode 100644
index 0000000..20d5956
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-with-options/expected.js
@@ -0,0 +1,14 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        type: "html",
+        parser: { sources: false },
+      },
+    ],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/loader-with-options/input.js b/codemods/html-plugins-to-native-html/tests/loader-with-options/input.js
new file mode 100644
index 0000000..21ee454
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/loader-with-options/input.js
@@ -0,0 +1,14 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: "html-loader",
+        options: {
+          sources: false,
+          esModule: true,
+        },
+      },
+    ],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/lost-options/expected.js b/codemods/html-plugins-to-native-html/tests/lost-options/expected.js
new file mode 100644
index 0000000..6203c8a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/lost-options/expected.js
@@ -0,0 +1,16 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: { collapseWhitespace: true } } },
+  output: {
+    // Removed html-webpack-plugin options without a native HTML equivalent: hash (use [contenthash] in output.htmlFilename), publicPath (set output.publicPath)
+    // output.html emits one page per entry; html-webpack-plugin emitted a single page with every chunk
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: {
+    app: "./src/app.js",
+    admin: "./src/admin.js",
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/lost-options/input.js b/codemods/html-plugins-to-native-html/tests/lost-options/input.js
new file mode 100644
index 0000000..4a8ac23
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/lost-options/input.js
@@ -0,0 +1,15 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: {
+    app: "./src/app.js",
+    admin: "./src/admin.js",
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      hash: true,
+      minify: { collapseWhitespace: true },
+      publicPath: "/static/",
+    }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-crlf/expected.js b/codemods/html-plugins-to-native-html/tests/minify-crlf/expected.js
new file mode 100644
index 0000000..a5972e9
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-crlf/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: false } },
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-crlf/input.js b/codemods/html-plugins-to-native-html/tests/minify-crlf/input.js
new file mode 100644
index 0000000..5f72ca8
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-crlf/input.js
@@ -0,0 +1,4 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  plugins: [new HtmlWebpackPlugin({ minify: false })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-custom-minimizer/expected.js b/codemods/html-plugins-to-native-html/tests/minify-custom-minimizer/expected.js
new file mode 100644
index 0000000..5021864
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-custom-minimizer/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  optimization: { minimizer: [new CustomMinimizer(), "..."] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-custom-minimizer/input.js b/codemods/html-plugins-to-native-html/tests/minify-custom-minimizer/input.js
new file mode 100644
index 0000000..17bb536
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-custom-minimizer/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  optimization: { minimizer: [new CustomMinimizer()] },
+  plugins: [new HtmlWebpackPlugin()],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-dynamic-minimizer/expected.js b/codemods/html-plugins-to-native-html/tests/minify-dynamic-minimizer/expected.js
new file mode 100644
index 0000000..5e4b2ec
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-dynamic-minimizer/expected.js
@@ -0,0 +1,12 @@
+module.exports = {
+  output: {
+    // Review: keep "..." in optimization.minimizer to enable native HTML minification
+    // Review: merge the HTML minification options into the existing optimization.minimizeOptions value
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  optimization: { minimizer: makeMinimizers(), minimizeOptions: getOptions() },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-dynamic-minimizer/input.js b/codemods/html-plugins-to-native-html/tests/minify-dynamic-minimizer/input.js
new file mode 100644
index 0000000..a8bdec5
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-dynamic-minimizer/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  optimization: { minimizer: makeMinimizers(), minimizeOptions: getOptions() },
+  plugins: [new HtmlWebpackPlugin({ minify: { removeComments: true } })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-dynamic-optimization/expected.js b/codemods/html-plugins-to-native-html/tests/minify-dynamic-optimization/expected.js
new file mode 100644
index 0000000..6565e96
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-dynamic-optimization/expected.js
@@ -0,0 +1,11 @@
+module.exports = {
+  output: {
+    // Review: configure the existing optimization value to use webpack's native HTML minimizer (minimizeOptions.html and minimizer: ["..."])
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  optimization: getOptimization(),
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-dynamic-optimization/input.js b/codemods/html-plugins-to-native-html/tests/minify-dynamic-optimization/input.js
new file mode 100644
index 0000000..98f03fb
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-dynamic-optimization/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  optimization: getOptimization(),
+  plugins: [new HtmlWebpackPlugin({ minify: false })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-existing-native/expected.js b/codemods/html-plugins-to-native-html/tests/minify-existing-native/expected.js
new file mode 100644
index 0000000..dd7bdfe
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-existing-native/expected.js
@@ -0,0 +1,14 @@
+module.exports = {
+  output: {
+    // Review: existing native HTML minification options take precedence over migrated minify/minimize options
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  optimization: {
+    minimize: { html: { comments: true }, javascript: false },
+    minimizer: ["...", new CustomMinimizer()],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-existing-native/input.js b/codemods/html-plugins-to-native-html/tests/minify-existing-native/input.js
new file mode 100644
index 0000000..ad02882
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-existing-native/input.js
@@ -0,0 +1,8 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  optimization: {
+    minimize: { html: { comments: true }, javascript: false },
+    minimizer: ["...", new CustomMinimizer()],
+  },
+  plugins: [new HtmlWebpackPlugin({ minify: false })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-existing-optimization/expected.js b/codemods/html-plugins-to-native-html/tests/minify-existing-optimization/expected.js
new file mode 100644
index 0000000..46f54fe
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-existing-optimization/expected.js
@@ -0,0 +1,14 @@
+module.exports = {
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  optimization: {
+    minimize: false,
+    minimizeOptions: { html: { comments: false }, javascript: { mangle: false }, css: false },
+    minimizer: [new CustomMinimizer(), "...", /* keep this comment */],
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-existing-optimization/input.js b/codemods/html-plugins-to-native-html/tests/minify-existing-optimization/input.js
new file mode 100644
index 0000000..eb3b01b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-existing-optimization/input.js
@@ -0,0 +1,9 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  optimization: {
+    minimize: false,
+    minimizeOptions: { javascript: { mangle: false }, css: false },
+    minimizer: [new CustomMinimizer(), /* keep this comment */],
+  },
+  plugins: [new HtmlWebpackPlugin({ minify: { removeComments: true } })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-false-custom-minimizer/expected.js b/codemods/html-plugins-to-native-html/tests/minify-false-custom-minimizer/expected.js
new file mode 100644
index 0000000..1eebd30
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-false-custom-minimizer/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  optimization: { minimizeOptions: { html: false }, minimizer: [] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-false-custom-minimizer/input.js b/codemods/html-plugins-to-native-html/tests/minify-false-custom-minimizer/input.js
new file mode 100644
index 0000000..5951e9e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-false-custom-minimizer/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  optimization: { minimizer: [] },
+  plugins: [new HtmlWebpackPlugin({ minify: false })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-false/expected.js b/codemods/html-plugins-to-native-html/tests/minify-false/expected.js
new file mode 100644
index 0000000..f40170a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-false/expected.js
@@ -0,0 +1,11 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: false } },
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  mode: "production",
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-false/input.js b/codemods/html-plugins-to-native-html/tests/minify-false/input.js
new file mode 100644
index 0000000..baced0c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-false/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  mode: "production",
+  plugins: [new HtmlWebpackPlugin({ minify: false })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-idempotent/expected.js b/codemods/html-plugins-to-native-html/tests/minify-idempotent/expected.js
new file mode 100644
index 0000000..fcb9621
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-idempotent/expected.js
@@ -0,0 +1,5 @@
+module.exports = {
+  output: { html: true, htmlFilename: "index.html" },
+  experiments: { html: true },
+  optimization: { minimizeOptions: { html: false }, minimizer: ["..."] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-idempotent/input.js b/codemods/html-plugins-to-native-html/tests/minify-idempotent/input.js
new file mode 100644
index 0000000..fcb9621
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-idempotent/input.js
@@ -0,0 +1,5 @@
+module.exports = {
+  output: { html: true, htmlFilename: "index.html" },
+  experiments: { html: true },
+  optimization: { minimizeOptions: { html: false }, minimizer: ["..."] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-options/expected.mjs b/codemods/html-plugins-to-native-html/tests/minify-options/expected.mjs
new file mode 100644
index 0000000..e30827f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-options/expected.mjs
@@ -0,0 +1,12 @@
+export default {
+  optimization: { minimizeOptions: { html: { collapseWhitespace: false, collapseBooleanAttributes: true, comments: true, extractComments: false, normalizeAttributeQuotes: true, removeOptionalTags: false, removeImpliedTags: false, removeEmptyAttributes: true, removeRedundantAttributes: false, sortAttributes: true } } },
+  output: {
+    // Removed html-webpack-plugin options without a native HTML equivalent: minify.minifyJS (configure optimization.minimizeOptions.html), minify.options (configure optimization.minimizeOptions.html)
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  mode: "development",
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-options/input.mjs b/codemods/html-plugins-to-native-html/tests/minify-options/input.mjs
new file mode 100644
index 0000000..5f32d7d
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-options/input.mjs
@@ -0,0 +1,17 @@
+import HtmlWebpackPlugin from "html-webpack-plugin";
+export default {
+  mode: "development",
+  plugins: [new HtmlWebpackPlugin({ minify: {
+    collapseWhitespace: false,
+    conservativeCollapse: true,
+    collapseBooleanAttributes: true,
+    removeComments: false,
+    removeAttributeQuotes: true,
+    removeOptionalTags: false,
+    removeEmptyAttributes: true,
+    removeRedundantAttributes: false,
+    sortAttributes: true,
+    minifyJS: false,
+    ...extraOptions,
+  } })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-shorthand/expected.js b/codemods/html-plugins-to-native-html/tests/minify-shorthand/expected.js
new file mode 100644
index 0000000..83c2ec2
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-shorthand/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  optimization: { minimize: { html: { collapseWhitespace: false }, javascript: false }, minimizer: [ "..."] },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-shorthand/input.js b/codemods/html-plugins-to-native-html/tests/minify-shorthand/input.js
new file mode 100644
index 0000000..7f81406
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-shorthand/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  optimization: { minimize: { javascript: false }, minimizer: [] },
+  plugins: [new HtmlWebpackPlugin({ minify: { collapseWhitespace: false } })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-template/expected.js b/codemods/html-plugins-to-native-html/tests/minify-template/expected.js
new file mode 100644
index 0000000..e2f1c7e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-template/expected.js
@@ -0,0 +1,11 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: false } },
+  output: {
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  // The template is now the entry: it must load the previous entry via <!-- webpackChunkName: "main" --> <script defer src="./app.js"></script> (added by the HTML workflow step when the template is included)
+  entry: "./src/app.html",
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-template/input.js b/codemods/html-plugins-to-native-html/tests/minify-template/input.js
new file mode 100644
index 0000000..6b982b3
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-template/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  entry: "./src/app.js",
+  plugins: [new HtmlWebpackPlugin({ template: "./src/app.html", minify: false })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-unknown-options/expected.js b/codemods/html-plugins-to-native-html/tests/minify-unknown-options/expected.js
new file mode 100644
index 0000000..6a957af
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-unknown-options/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  output: {
+    // Removed html-webpack-plugin options without a native HTML equivalent: minify (configure optimization.minimizeOptions.html)
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/minify-unknown-options/input.js b/codemods/html-plugins-to-native-html/tests/minify-unknown-options/input.js
new file mode 100644
index 0000000..e096169
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/minify-unknown-options/input.js
@@ -0,0 +1,4 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  plugins: [new HtmlWebpackPlugin({ minify: settings })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/module-scripts-existing-experiment/expected.mjs b/codemods/html-plugins-to-native-html/tests/module-scripts-existing-experiment/expected.mjs
new file mode 100644
index 0000000..11869de
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/module-scripts-existing-experiment/expected.mjs
@@ -0,0 +1,8 @@
+export default {
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+    module: true,
+  },
+  experiments: { html: true, },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/module-scripts-existing-experiment/input.mjs b/codemods/html-plugins-to-native-html/tests/module-scripts-existing-experiment/input.mjs
new file mode 100644
index 0000000..027f9b4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/module-scripts-existing-experiment/input.mjs
@@ -0,0 +1,5 @@
+import Html from "html-webpack-plugin";
+export default {
+  experiments: { outputModule: true },
+  plugins: [new Html({ scriptLoading: "module" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/module-scripts/expected.js b/codemods/html-plugins-to-native-html/tests/module-scripts/expected.js
new file mode 100644
index 0000000..f7813d6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/module-scripts/expected.js
@@ -0,0 +1,12 @@
+module.exports = {
+  output: {
+    // Removed html-webpack-plugin options without a native HTML equivalent: meta.refresh
+    html: { meta: { viewport: "width=device-width, initial-scale=1", "og:title": "My App" } },
+    htmlFilename: "index.html",
+    module: true,
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+};
diff --git a/codemods/html-plugins-to-native-html/tests/module-scripts/input.js b/codemods/html-plugins-to-native-html/tests/module-scripts/input.js
new file mode 100644
index 0000000..53afccb
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/module-scripts/input.js
@@ -0,0 +1,15 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+  plugins: [
+    new HtmlWebpackPlugin({
+      scriptLoading: "module",
+      meta: {
+        viewport: "width=device-width, initial-scale=1",
+        "og:title": { property: "og:title", content: "My App" },
+        refresh: { "http-equiv": "refresh", content: "30" },
+      },
+    }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-chunk-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/multi-chunk-untouched/expected.js
new file mode 100644
index 0000000..92a9507
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-chunk-untouched/expected.js
@@ -0,0 +1,9 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: { a: "./src/a.js", b: "./src/b.js" },
+  plugins: [
+    new HtmlWebpackPlugin({ filename: "a.html", chunks: ["a", "b"] }),
+    new HtmlWebpackPlugin({ template: "./b.html", chunks: ["b"] }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-chunk-untouched/input.js b/codemods/html-plugins-to-native-html/tests/multi-chunk-untouched/input.js
new file mode 100644
index 0000000..92a9507
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-chunk-untouched/input.js
@@ -0,0 +1,9 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: { a: "./src/a.js", b: "./src/b.js" },
+  plugins: [
+    new HtmlWebpackPlugin({ filename: "a.html", chunks: ["a", "b"] }),
+    new HtmlWebpackPlugin({ template: "./b.html", chunks: ["b"] }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-entry-template-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/multi-entry-template-untouched/expected.js
new file mode 100644
index 0000000..694ec8c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-entry-template-untouched/expected.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  entry: ["./polyfill.js", "./app.js"],
+  plugins: [new HtmlWebpackPlugin({ template: "./index.html" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-entry-template-untouched/input.js b/codemods/html-plugins-to-native-html/tests/multi-entry-template-untouched/input.js
new file mode 100644
index 0000000..694ec8c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-entry-template-untouched/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  entry: ["./polyfill.js", "./app.js"],
+  plugins: [new HtmlWebpackPlugin({ template: "./index.html" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-page-minify-conflict-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/multi-page-minify-conflict-untouched/expected.js
new file mode 100644
index 0000000..e541cb4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-page-minify-conflict-untouched/expected.js
@@ -0,0 +1,8 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  entry: { app: "./app.js", admin: "./admin.js" },
+  plugins: [
+    new HtmlWebpackPlugin({ chunks: ["app"], minify: true }),
+    new HtmlWebpackPlugin({ chunks: ["admin"], minify: false }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-page-minify-conflict-untouched/input.js b/codemods/html-plugins-to-native-html/tests/multi-page-minify-conflict-untouched/input.js
new file mode 100644
index 0000000..e541cb4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-page-minify-conflict-untouched/input.js
@@ -0,0 +1,8 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  entry: { app: "./app.js", admin: "./admin.js" },
+  plugins: [
+    new HtmlWebpackPlugin({ chunks: ["app"], minify: true }),
+    new HtmlWebpackPlugin({ chunks: ["admin"], minify: false }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-page-minify/expected.js b/codemods/html-plugins-to-native-html/tests/multi-page-minify/expected.js
new file mode 100644
index 0000000..d522db7
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-page-minify/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  optimization: { minimizeOptions: { html: false } },
+  output: {
+    htmlFilename: "[name].html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: { app: { import: "./app.js", html: true }, admin: { import: "./admin.js", html: true } },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-page-minify/input.js b/codemods/html-plugins-to-native-html/tests/multi-page-minify/input.js
new file mode 100644
index 0000000..bec012c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-page-minify/input.js
@@ -0,0 +1,8 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  entry: { app: "./app.js", admin: "./admin.js" },
+  plugins: [
+    new HtmlWebpackPlugin({ chunks: ["app"], minify: false }),
+    new HtmlWebpackPlugin({ chunks: ["admin"], minify: false }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-page-options/expected.js b/codemods/html-plugins-to-native-html/tests/multi-page-options/expected.js
new file mode 100644
index 0000000..fa55f6b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-page-options/expected.js
@@ -0,0 +1,12 @@
+module.exports = {
+  output: {
+    htmlFilename: "[name].html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: {
+    app: { import: "./src/app.js", html: { title: "App" } },
+    admin: { import: "./src/admin.js", html: { title: "Admin", inject: "head" } },
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-page-options/input.js b/codemods/html-plugins-to-native-html/tests/multi-page-options/input.js
new file mode 100644
index 0000000..43888f0
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-page-options/input.js
@@ -0,0 +1,12 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: {
+    app: "./src/app.js",
+    admin: "./src/admin.js",
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ chunks: ["app"], filename: "app.html", title: "App" }),
+    new HtmlWebpackPlugin({ chunks: ["admin"], filename: "admin.html", title: "Admin", inject: "head" }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-page/expected.js b/codemods/html-plugins-to-native-html/tests/multi-page/expected.js
new file mode 100644
index 0000000..8b4a381
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-page/expected.js
@@ -0,0 +1,9 @@
+module.exports = {
+  output: {
+    htmlFilename: "[name].html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: { a: { import: "./src/a.js", html: true }, b: { import: "./src/b.js", html: true } },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/multi-page/input.js b/codemods/html-plugins-to-native-html/tests/multi-page/input.js
new file mode 100644
index 0000000..c2c374c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/multi-page/input.js
@@ -0,0 +1,9 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: { a: "./src/a.js", b: "./src/b.js" },
+  plugins: [
+    new HtmlWebpackPlugin({ filename: "a.html", chunks: ["a"] }),
+    new HtmlWebpackPlugin({ filename: "b.html", chunks: ["b"] }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/native-html-disabled/expected.js b/codemods/html-plugins-to-native-html/tests/native-html-disabled/expected.js
new file mode 100644
index 0000000..0059478
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/native-html-disabled/expected.js
@@ -0,0 +1,4 @@
+module.exports = {
+  experiments: { html: true },
+  output: { htmlFilename: "index.html", html: true, module: true },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/native-html-disabled/input.js b/codemods/html-plugins-to-native-html/tests/native-html-disabled/input.js
new file mode 100644
index 0000000..1081a02
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/native-html-disabled/input.js
@@ -0,0 +1,6 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = {
+  experiments: { html: false, outputModule: false },
+  output: { html: false, module: false },
+  plugins: [new HtmlWebpackPlugin({ scriptLoading: "module" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/plugin-and-loader/expected.js b/codemods/html-plugins-to-native-html/tests/plugin-and-loader/expected.js
new file mode 100644
index 0000000..0ee646a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/plugin-and-loader/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  output: {
+    html: true,
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+};
diff --git a/codemods/html-plugins-to-native-html/tests/plugin-and-loader/input.js b/codemods/html-plugins-to-native-html/tests/plugin-and-loader/input.js
new file mode 100644
index 0000000..56f4ddf
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/plugin-and-loader/input.js
@@ -0,0 +1,14 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        use: ["html-loader"],
+      },
+    ],
+  },
+  plugins: [new HtmlWebpackPlugin()],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies.ts b/codemods/html-plugins-to-native-html/tests/remove-dependencies.ts
new file mode 100644
index 0000000..77a46c8
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies.ts
@@ -0,0 +1,11 @@
+import type Json from "@codemod.com/jssg-types/langs/json";
+import type { SgRoot } from "@codemod.com/jssg-types/main";
+import { removeUnusedDependencies } from "../src/remove-dependencies";
+
+// Simulate absent, partial, and completed reference scans. The workflow
+// integration tests cover collecting those references across source files.
+export default async function transform(root: SgRoot<Json>): Promise<string | null> {
+  if (root.filename().includes("missing-scan")) return removeUnusedDependencies(root, null);
+  const remaining = root.filename().includes("source-reference") ? new Set(["html-loader"]) : new Set<string>();
+  return removeUnusedDependencies(root, remaining);
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/escaped-manifest-reference/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/escaped-manifest-reference/expected.json
new file mode 100644
index 0000000..e6a7cf7
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/escaped-manifest-reference/expected.json
@@ -0,0 +1,4 @@
+{
+  "scripts": { "inspect": "node -p 'require.resolve(\"html\u002dloader\")'" },
+  "devDependencies": { "html-loader": "^5.1.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/escaped-manifest-reference/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/escaped-manifest-reference/input.json
new file mode 100644
index 0000000..7807067
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/escaped-manifest-reference/input.json
@@ -0,0 +1,4 @@
+{
+  "scripts": { "inspect": "node -p 'require.resolve(\"html\u002dloader\")'" },
+  "devDependencies": { "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/manifest-reference/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/manifest-reference/expected.json
new file mode 100644
index 0000000..1083271
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/manifest-reference/expected.json
@@ -0,0 +1,4 @@
+{
+  "scripts": { "inspect": "node -p 'require.resolve(\"html-loader\")'" },
+  "devDependencies": { "html-loader": "^5.1.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/manifest-reference/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/manifest-reference/input.json
new file mode 100644
index 0000000..d03522f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/manifest-reference/input.json
@@ -0,0 +1,4 @@
+{
+  "scripts": { "inspect": "node -p 'require.resolve(\"html-loader\")'" },
+  "devDependencies": { "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/metadata-mentions/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/metadata-mentions/expected.json
new file mode 100644
index 0000000..c99814f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/metadata-mentions/expected.json
@@ -0,0 +1,4 @@
+{
+  "description": "Migrated from html-loader and html-webpack-plugin",
+  "devDependencies": {}
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/metadata-mentions/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/metadata-mentions/input.json
new file mode 100644
index 0000000..fcbafa9
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/metadata-mentions/input.json
@@ -0,0 +1,4 @@
+{
+  "description": "Migrated from html-loader and html-webpack-plugin",
+  "devDependencies": { "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/missing-scan/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/missing-scan/expected.json
new file mode 100644
index 0000000..b94d9d6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/missing-scan/expected.json
@@ -0,0 +1,4 @@
+{
+  "dependencies": { "html-loader": "^5.1.0" },
+  "devDependencies": { "html-webpack-plugin": "^5.6.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/missing-scan/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/missing-scan/input.json
new file mode 100644
index 0000000..b94d9d6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/missing-scan/input.json
@@ -0,0 +1,4 @@
+{
+  "dependencies": { "html-loader": "^5.1.0" },
+  "devDependencies": { "html-webpack-plugin": "^5.6.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/nested-tool-reference/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/nested-tool-reference/expected.json
new file mode 100644
index 0000000..6ef0cfb
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/nested-tool-reference/expected.json
@@ -0,0 +1,5 @@
+{
+  "tool": { "loader": "html\u002dloader/dist/index.js" },
+  "peerDependencies": { "html-webpack-plugin": "^5.6.0" },
+  "devDependencies": { "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/nested-tool-reference/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/nested-tool-reference/input.json
new file mode 100644
index 0000000..64c600e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/nested-tool-reference/input.json
@@ -0,0 +1,5 @@
+{
+  "tool": { "loader": "html\u002dloader/dist/index.js" },
+  "peerDependencies": { "html-webpack-plugin": "^5.6.0" },
+  "devDependencies": { "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.0", "favicons-webpack-plugin": "^6.0.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/no-sections/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/no-sections/expected.json
new file mode 100644
index 0000000..ed85159
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/no-sections/expected.json
@@ -0,0 +1,5 @@
+{
+  "name": "app",
+  "version": "1.0.0",
+  "private": true
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/no-sections/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/no-sections/input.json
new file mode 100644
index 0000000..ed85159
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/no-sections/input.json
@@ -0,0 +1,5 @@
+{
+  "name": "app",
+  "version": "1.0.0",
+  "private": true
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/production-and-development/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/production-and-development/expected.json
new file mode 100644
index 0000000..7523076
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/production-and-development/expected.json
@@ -0,0 +1,10 @@
+{
+  "name": "app",
+  "dependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.0",
+    "webpack": "^5.112.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/production-and-development/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/production-and-development/input.json
new file mode 100644
index 0000000..1dc0df6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/production-and-development/input.json
@@ -0,0 +1,13 @@
+{
+  "name": "app",
+  "dependencies": {
+    "html-loader": "^5.1.0",
+    "react": "^18.0.0",
+    "html-webpack-plugin": "^5.6.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.0",
+    "favicons-webpack-plugin": "^6.0.0",
+    "webpack": "^5.112.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes-all/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes-all/expected.json
new file mode 100644
index 0000000..9b55ba8
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes-all/expected.json
@@ -0,0 +1,4 @@
+{
+  "dependencies": {},
+  "devDependencies": {}
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes-all/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes-all/input.json
new file mode 100644
index 0000000..97d8c42
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes-all/input.json
@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "html-loader": "^5.1.0"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^5.6.0",
+    "favicons-webpack-plugin": "^6.0.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes/expected.json
new file mode 100644
index 0000000..829eb92
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes/expected.json
@@ -0,0 +1,9 @@
+{
+  "name": "app",
+  "dependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "webpack": "^5.109.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes/input.json
new file mode 100644
index 0000000..387e01b
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/removes/input.json
@@ -0,0 +1,14 @@
+{
+  "name": "app",
+  "dependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "csp-html-webpack-plugin": "^5.1.0",
+    "favicons-webpack-plugin": "^6.0.0",
+    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "webpack": "^5.109.0",
+    "webpack-subresource-integrity": "^5.2.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/source-reference/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/source-reference/expected.json
new file mode 100644
index 0000000..8a0b41f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/source-reference/expected.json
@@ -0,0 +1,4 @@
+{
+  "dependencies": { "html-loader": "^5.1.0" },
+  "devDependencies": { "html-loader": "^5.1.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/source-reference/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/source-reference/input.json
new file mode 100644
index 0000000..1b3f200
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/source-reference/input.json
@@ -0,0 +1,4 @@
+{
+  "dependencies": { "html-loader": "^5.1.0", "html-webpack-plugin": "^5.6.0" },
+  "devDependencies": { "html-loader": "^5.1.0", "favicons-webpack-plugin": "^6.0.0" }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/untouched/expected.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/untouched/expected.json
new file mode 100644
index 0000000..111e5ea
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/untouched/expected.json
@@ -0,0 +1,6 @@
+{
+  "name": "app",
+  "dependencies": {
+    "react": "^18.0.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/remove-dependencies/untouched/input.json b/codemods/html-plugins-to-native-html/tests/remove-dependencies/untouched/input.json
new file mode 100644
index 0000000..111e5ea
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/remove-dependencies/untouched/input.json
@@ -0,0 +1,6 @@
+{
+  "name": "app",
+  "dependencies": {
+    "react": "^18.0.0"
+  }
+}
diff --git a/codemods/html-plugins-to-native-html/tests/sibling-plugins/expected.js b/codemods/html-plugins-to-native-html/tests/sibling-plugins/expected.js
new file mode 100644
index 0000000..281cc5e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/sibling-plugins/expected.js
@@ -0,0 +1,16 @@
+const { DefinePlugin } = require("webpack");
+
+module.exports = {
+  output: {
+    // Review: native favicon emits the source icon only; generate the required icon sizes/formats and web app manifest manually, then configure their links in output.html or the HTML template
+    html: { title: "App", csp: { policy: { "script-src": ["'self'"] } }, integrity: ["sha384"], favicon: "./src/logo.png" },
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+  plugins: [
+    new DefinePlugin({ DEBUG: "false" }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/sibling-plugins/input.js b/codemods/html-plugins-to-native-html/tests/sibling-plugins/input.js
new file mode 100644
index 0000000..aa33ac1
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/sibling-plugins/input.js
@@ -0,0 +1,16 @@
+const { DefinePlugin } = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin");
+const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
+const { SubresourceIntegrityPlugin } = require("webpack-subresource-integrity");
+
+module.exports = {
+  entry: "./src/index.js",
+  plugins: [
+    new HtmlWebpackPlugin({ title: "App" }),
+    new CspHtmlWebpackPlugin({ "script-src": ["'self'"] }),
+    new SubresourceIntegrityPlugin({ hashFuncNames: ["sha384"] }),
+    new FaviconsWebpackPlugin("./src/logo.png"),
+    new DefinePlugin({ DEBUG: "false" }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/spread-options-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/spread-options-untouched/expected.js
new file mode 100644
index 0000000..a5a77c1
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/spread-options-untouched/expected.js
@@ -0,0 +1,2 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = { plugins: [new HtmlWebpackPlugin({ ...options, title: "App" })] };
diff --git a/codemods/html-plugins-to-native-html/tests/spread-options-untouched/input.js b/codemods/html-plugins-to-native-html/tests/spread-options-untouched/input.js
new file mode 100644
index 0000000..a5a77c1
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/spread-options-untouched/input.js
@@ -0,0 +1,2 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = { plugins: [new HtmlWebpackPlugin({ ...options, title: "App" })] };
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks.ts b/codemods/html-plugins-to-native-html/tests/template-chunks.ts
new file mode 100644
index 0000000..18f493f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks.ts
@@ -0,0 +1,11 @@
+import type Html from "@codemod.com/jssg-types/langs/html";
+import type { SgRoot } from "@codemod.com/jssg-types/main";
+import { addTemplateScripts } from "../src/templates";
+
+export default async function transform(root: SgRoot<Html>): Promise<string | null> {
+  if (root.filename().includes("conflicting")) {
+    return addTemplateScripts(root, [{ src: "./index.js", chunkName: "app" }, { src: "./index.js", chunkName: "admin" }]);
+  }
+  const chunkName = root.filename().includes("escaped") ? 'app--><script>"' : "app";
+  return addTemplateScripts(root, [{ src: "./index.js", chunkName }]);
+}
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/conflicting/expected.html b/codemods/html-plugins-to-native-html/tests/template-chunks/conflicting/expected.html
new file mode 100644
index 0000000..6daa2ba
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/conflicting/expected.html
@@ -0,0 +1 @@
+<head><script defer src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/conflicting/input.html b/codemods/html-plugins-to-native-html/tests/template-chunks/conflicting/input.html
new file mode 100644
index 0000000..1cc3525
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/conflicting/input.html
@@ -0,0 +1 @@
+<head></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/crlf/expected.html b/codemods/html-plugins-to-native-html/tests/template-chunks/crlf/expected.html
new file mode 100644
index 0000000..8facaec
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/crlf/expected.html
@@ -0,0 +1,4 @@
+<head>
+  <!-- webpackChunkName: "app" -->
+  <script src="index.js"></script>
+</head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/crlf/input.html b/codemods/html-plugins-to-native-html/tests/template-chunks/crlf/input.html
new file mode 100644
index 0000000..40418e2
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/crlf/input.html
@@ -0,0 +1,3 @@
+<head>
+  <script src="index.js"></script>
+</head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/escaped/expected.html b/codemods/html-plugins-to-native-html/tests/template-chunks/escaped/expected.html
new file mode 100644
index 0000000..d4c423d
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/escaped/expected.html
@@ -0,0 +1 @@
+<head><!-- webpackChunkName: "app\u002d\u002d\u003e\u003cscript\u003e\"" --> <script defer src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/escaped/input.html b/codemods/html-plugins-to-native-html/tests/template-chunks/escaped/input.html
new file mode 100644
index 0000000..1cc3525
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/escaped/input.html
@@ -0,0 +1 @@
+<head></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/existing-hints/expected.html b/codemods/html-plugins-to-native-html/tests/template-chunks/existing-hints/expected.html
new file mode 100644
index 0000000..000acde
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/existing-hints/expected.html
@@ -0,0 +1 @@
+<head><!-- webpackPreload: true --><script src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/existing-hints/input.html b/codemods/html-plugins-to-native-html/tests/template-chunks/existing-hints/input.html
new file mode 100644
index 0000000..000acde
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/existing-hints/input.html
@@ -0,0 +1 @@
+<head><!-- webpackPreload: true --><script src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/existing-name/expected.html b/codemods/html-plugins-to-native-html/tests/template-chunks/existing-name/expected.html
new file mode 100644
index 0000000..0c71405
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/existing-name/expected.html
@@ -0,0 +1 @@
+<head><!-- webpackChunkName: "custom" --><script src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/existing-name/input.html b/codemods/html-plugins-to-native-html/tests/template-chunks/existing-name/input.html
new file mode 100644
index 0000000..0c71405
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/existing-name/input.html
@@ -0,0 +1 @@
+<head><!-- webpackChunkName: "custom" --><script src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/existing/expected.html b/codemods/html-plugins-to-native-html/tests/template-chunks/existing/expected.html
new file mode 100644
index 0000000..0543305
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/existing/expected.html
@@ -0,0 +1,4 @@
+<head>
+  <!-- webpackChunkName: "app" -->
+  <script defer src="./index.js"></script>
+</head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/existing/input.html b/codemods/html-plugins-to-native-html/tests/template-chunks/existing/input.html
new file mode 100644
index 0000000..5f0c12f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/existing/input.html
@@ -0,0 +1,3 @@
+<head>
+  <script defer src="./index.js"></script>
+</head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/idempotent/expected.html b/codemods/html-plugins-to-native-html/tests/template-chunks/idempotent/expected.html
new file mode 100644
index 0000000..994baff
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/idempotent/expected.html
@@ -0,0 +1 @@
+<head><!-- webpackChunkName: "app" --><script defer src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/idempotent/input.html b/codemods/html-plugins-to-native-html/tests/template-chunks/idempotent/input.html
new file mode 100644
index 0000000..994baff
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/idempotent/input.html
@@ -0,0 +1 @@
+<head><!-- webpackChunkName: "app" --><script defer src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/ignored/expected.html b/codemods/html-plugins-to-native-html/tests/template-chunks/ignored/expected.html
new file mode 100644
index 0000000..785d5ed
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/ignored/expected.html
@@ -0,0 +1 @@
+<head><!-- webpackIgnore: true --><script src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/ignored/input.html b/codemods/html-plugins-to-native-html/tests/template-chunks/ignored/input.html
new file mode 100644
index 0000000..785d5ed
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/ignored/input.html
@@ -0,0 +1 @@
+<head><!-- webpackIgnore: true --><script src="./index.js"></script></head>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/insert/expected.html b/codemods/html-plugins-to-native-html/tests/template-chunks/insert/expected.html
new file mode 100644
index 0000000..82d5d2d
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/insert/expected.html
@@ -0,0 +1,6 @@
+<html>
+<head>
+  <title>App</title>
+  <!-- webpackChunkName: "app" --> <script defer src="./index.js"></script>
+</head>
+</html>
diff --git a/codemods/html-plugins-to-native-html/tests/template-chunks/insert/input.html b/codemods/html-plugins-to-native-html/tests/template-chunks/insert/input.html
new file mode 100644
index 0000000..19a082e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-chunks/insert/input.html
@@ -0,0 +1,5 @@
+<html>
+<head>
+  <title>App</title>
+</head>
+</html>
diff --git a/codemods/html-plugins-to-native-html/tests/template-dynamic-entry-name-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/template-dynamic-entry-name-untouched/expected.js
new file mode 100644
index 0000000..655bccf
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-dynamic-entry-name-untouched/expected.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = [
+  { entry: { [getName()]: "./src/index.js" }, plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })] },
+  { entry: { ...entries, app: "./src/index.js" }, plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })] },
+];
diff --git a/codemods/html-plugins-to-native-html/tests/template-dynamic-entry-name-untouched/input.js b/codemods/html-plugins-to-native-html/tests/template-dynamic-entry-name-untouched/input.js
new file mode 100644
index 0000000..655bccf
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-dynamic-entry-name-untouched/input.js
@@ -0,0 +1,5 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+module.exports = [
+  { entry: { [getName()]: "./src/index.js" }, plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })] },
+  { entry: { ...entries, app: "./src/index.js" }, plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })] },
+];
diff --git a/codemods/html-plugins-to-native-html/tests/template-entry-object/expected.js b/codemods/html-plugins-to-native-html/tests/template-entry-object/expected.js
new file mode 100644
index 0000000..65310f3
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-entry-object/expected.js
@@ -0,0 +1,12 @@
+module.exports = {
+  output: {
+    htmlFilename: "main.html",
+  },
+  experiments: {
+    html: true,
+  },
+  // The template is now the entry: it must load the previous entry via <!-- webpackChunkName: "main" --> <script defer src="./main.js"></script> (added by the HTML workflow step when the template is included)
+  entry: {
+    main: "./src/index.html",
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/template-entry-object/input.js b/codemods/html-plugins-to-native-html/tests/template-entry-object/input.js
new file mode 100644
index 0000000..2423b0f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-entry-object/input.js
@@ -0,0 +1,8 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: {
+    main: "./src/main.js",
+  },
+  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html", filename: "main.html" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/template-escaped-identifier-untouched/expected.js b/codemods/html-plugins-to-native-html/tests/template-escaped-identifier-untouched/expected.js
new file mode 100644
index 0000000..4769770
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-escaped-identifier-untouched/expected.js
@@ -0,0 +1,6 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: { app\u0041: "./src/index.js" },
+  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/template-escaped-identifier-untouched/input.js b/codemods/html-plugins-to-native-html/tests/template-escaped-identifier-untouched/input.js
new file mode 100644
index 0000000..4769770
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-escaped-identifier-untouched/input.js
@@ -0,0 +1,6 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: { app\u0041: "./src/index.js" },
+  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/template-no-entry/expected.js b/codemods/html-plugins-to-native-html/tests/template-no-entry/expected.js
new file mode 100644
index 0000000..e8f18c6
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-no-entry/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  // The template is now the entry: it must load the previous default entry via <!-- webpackChunkName: "main" --> <script defer src="../src/index.js"></script> (added by the HTML workflow step when the template is included)
+  entry: "./public/index.html",
+  output: {
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/template-no-entry/input.js b/codemods/html-plugins-to-native-html/tests/template-no-entry/input.js
new file mode 100644
index 0000000..037228d
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-no-entry/input.js
@@ -0,0 +1,9 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./public/index.html",
+    }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/template-script-added/expected.js b/codemods/html-plugins-to-native-html/tests/template-script-added/expected.js
new file mode 100644
index 0000000..badbdfd
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-script-added/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  output: {
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  // The template is now the entry: it must load the previous entry via <!-- webpackChunkName: "main" --> <script defer src="./index.js"></script> (added by the HTML workflow step when the template is included)
+  entry: "./src/index.html",
+};
diff --git a/codemods/html-plugins-to-native-html/tests/template-script-added/input.js b/codemods/html-plugins-to-native-html/tests/template-script-added/input.js
new file mode 100644
index 0000000..36dc904
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-script-added/input.js
@@ -0,0 +1,10 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./src/index.html",
+    }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/template-script-added/src/index.html b/codemods/html-plugins-to-native-html/tests/template-script-added/src/index.html
new file mode 100644
index 0000000..dce0ce0
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-script-added/src/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>App</title>
+    <script defer src="./index.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/codemods/html-plugins-to-native-html/tests/template-script-added/src/index.js b/codemods/html-plugins-to-native-html/tests/template-script-added/src/index.js
new file mode 100644
index 0000000..702645f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template-script-added/src/index.js
@@ -0,0 +1 @@
+console.log("app");
diff --git a/codemods/html-plugins-to-native-html/tests/template/expected.js b/codemods/html-plugins-to-native-html/tests/template/expected.js
new file mode 100644
index 0000000..4f40073
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template/expected.js
@@ -0,0 +1,12 @@
+module.exports = {
+  experiments: {
+    html: true,
+  },
+  // The template is now the entry: it must load the previous entry via <!-- webpackChunkName: "main" --> <script defer src="./index.js"></script> (added by the HTML workflow step when the template is included)
+  entry: "./src/index.html",
+  output: {
+    // Removed html-webpack-plugin options without a native HTML equivalent: title (add it to the template)
+    htmlFilename: "index.html",
+    filename: "[name].js",
+  },
+};
diff --git a/codemods/html-plugins-to-native-html/tests/template/input.js b/codemods/html-plugins-to-native-html/tests/template/input.js
new file mode 100644
index 0000000..0454032
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/template/input.js
@@ -0,0 +1,14 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+  output: {
+    filename: "[name].js",
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./src/index.html",
+      title: "My App",
+    }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/templates.ts b/codemods/html-plugins-to-native-html/tests/templates.ts
new file mode 100644
index 0000000..c2e1451
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates.ts
@@ -0,0 +1,7 @@
+import type Html from "@codemod.com/jssg-types/langs/html";
+import type { SgRoot } from "@codemod.com/jssg-types/main";
+import { addTemplateScripts } from "../src/templates";
+
+export default async function transform(root: SgRoot<Html>): Promise<string | null> {
+  return addTemplateScripts(root, [{ src: "./index.js" }]);
+}
diff --git a/codemods/html-plugins-to-native-html/tests/templates/body/expected.html b/codemods/html-plugins-to-native-html/tests/templates/body/expected.html
new file mode 100644
index 0000000..57afd75
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/body/expected.html
@@ -0,0 +1 @@
+<body>App<script defer src="./index.js"></script></body>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/body/input.html b/codemods/html-plugins-to-native-html/tests/templates/body/input.html
new file mode 100644
index 0000000..f817e34
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/body/input.html
@@ -0,0 +1 @@
+<body>App</body>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/comment-is-not-script/expected.html b/codemods/html-plugins-to-native-html/tests/templates/comment-is-not-script/expected.html
new file mode 100644
index 0000000..196433f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/comment-is-not-script/expected.html
@@ -0,0 +1 @@
+<head><!-- <script src="./index.js"></script> --><script defer src="./index.js"></script></head>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/comment-is-not-script/input.html b/codemods/html-plugins-to-native-html/tests/templates/comment-is-not-script/input.html
new file mode 100644
index 0000000..4ab41c0
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/comment-is-not-script/input.html
@@ -0,0 +1 @@
+<head><!-- <script src="./index.js"></script> --></head>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/crlf/expected.html b/codemods/html-plugins-to-native-html/tests/templates/crlf/expected.html
new file mode 100644
index 0000000..5f0c12f
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/crlf/expected.html
@@ -0,0 +1,3 @@
+<head>
+  <script defer src="./index.js"></script>
+</head>
diff --git a/codemods/html-plugins-to-native-html/tests/templates/crlf/input.html b/codemods/html-plugins-to-native-html/tests/templates/crlf/input.html
new file mode 100644
index 0000000..1a9d3d9
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/crlf/input.html
@@ -0,0 +1,2 @@
+<head>
+</head>
diff --git a/codemods/html-plugins-to-native-html/tests/templates/existing-unquoted/expected.html b/codemods/html-plugins-to-native-html/tests/templates/existing-unquoted/expected.html
new file mode 100644
index 0000000..f7efb8a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/existing-unquoted/expected.html
@@ -0,0 +1 @@
+<head><script src=./index.js></script></head>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/existing-unquoted/input.html b/codemods/html-plugins-to-native-html/tests/templates/existing-unquoted/input.html
new file mode 100644
index 0000000..f7efb8a
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/existing-unquoted/input.html
@@ -0,0 +1 @@
+<head><script src=./index.js></script></head>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/existing/expected.html b/codemods/html-plugins-to-native-html/tests/templates/existing/expected.html
new file mode 100644
index 0000000..3f269fd
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/existing/expected.html
@@ -0,0 +1 @@
+<head><script src="index.js"></script></head>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/existing/input.html b/codemods/html-plugins-to-native-html/tests/templates/existing/input.html
new file mode 100644
index 0000000..3f269fd
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/existing/input.html
@@ -0,0 +1 @@
+<head><script src="index.js"></script></head>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/fragment/expected.html b/codemods/html-plugins-to-native-html/tests/templates/fragment/expected.html
new file mode 100644
index 0000000..af9728c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/fragment/expected.html
@@ -0,0 +1,2 @@
+<p>App</p>
+<script defer src="./index.js"></script>
diff --git a/codemods/html-plugins-to-native-html/tests/templates/fragment/input.html b/codemods/html-plugins-to-native-html/tests/templates/fragment/input.html
new file mode 100644
index 0000000..3c756d9
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/fragment/input.html
@@ -0,0 +1 @@
+<p>App</p>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/head/expected.html b/codemods/html-plugins-to-native-html/tests/templates/head/expected.html
new file mode 100644
index 0000000..587f389
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/head/expected.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+  <head>
+    <title>App</title>
+    <script defer src="./index.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/codemods/html-plugins-to-native-html/tests/templates/head/input.html b/codemods/html-plugins-to-native-html/tests/templates/head/input.html
new file mode 100644
index 0000000..5d5729e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/head/input.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <head>
+    <title>App</title>
+  </head>
+  <body></body>
+</html>
diff --git a/codemods/html-plugins-to-native-html/tests/templates/inline/expected.html b/codemods/html-plugins-to-native-html/tests/templates/inline/expected.html
new file mode 100644
index 0000000..f8b9c12
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/inline/expected.html
@@ -0,0 +1 @@
+<html><head><script defer src="./index.js"></script></head><body></body></html>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/templates/inline/input.html b/codemods/html-plugins-to-native-html/tests/templates/inline/input.html
new file mode 100644
index 0000000..1707182
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/templates/inline/input.html
@@ -0,0 +1 @@
+<html><head></head><body></body></html>
\ No newline at end of file
diff --git a/codemods/html-plugins-to-native-html/tests/typescript-config/expected.ts b/codemods/html-plugins-to-native-html/tests/typescript-config/expected.ts
new file mode 100644
index 0000000..bad4528
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/typescript-config/expected.ts
@@ -0,0 +1,14 @@
+import type { Configuration } from "webpack";
+
+const config: Configuration = {
+  output: {
+    html: { title: "App" },
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+};
+
+export default config;
diff --git a/codemods/html-plugins-to-native-html/tests/typescript-config/input.ts b/codemods/html-plugins-to-native-html/tests/typescript-config/input.ts
new file mode 100644
index 0000000..994c0c4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/typescript-config/input.ts
@@ -0,0 +1,9 @@
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import type { Configuration } from "webpack";
+
+const config: Configuration = {
+  entry: "./src/index.js",
+  plugins: [new HtmlWebpackPlugin({ title: "App" })],
+};
+
+export default config;
diff --git a/codemods/html-plugins-to-native-html/tests/untouched/expected.js b/codemods/html-plugins-to-native-html/tests/untouched/expected.js
new file mode 100644
index 0000000..57d731c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/untouched/expected.js
@@ -0,0 +1,8 @@
+const { DefinePlugin } = require("webpack");
+
+module.exports = {
+  module: {
+    rules: [{ test: /\.js$/, use: ["babel-loader"] }],
+  },
+  plugins: [new DefinePlugin({ DEBUG: "false" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/untouched/input.js b/codemods/html-plugins-to-native-html/tests/untouched/input.js
new file mode 100644
index 0000000..57d731c
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/untouched/input.js
@@ -0,0 +1,8 @@
+const { DefinePlugin } = require("webpack");
+
+module.exports = {
+  module: {
+    rules: [{ test: /\.js$/, use: ["babel-loader"] }],
+  },
+  plugins: [new DefinePlugin({ DEBUG: "false" })],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/webpack-merge/expected.js b/codemods/html-plugins-to-native-html/tests/webpack-merge/expected.js
new file mode 100644
index 0000000..310a0b9
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/webpack-merge/expected.js
@@ -0,0 +1,13 @@
+const { merge } = require("webpack-merge");
+const base = require("./webpack.base");
+
+module.exports = merge(base, {
+  output: {
+    html: { title: "App" },
+    htmlFilename: "index.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+});
diff --git a/codemods/html-plugins-to-native-html/tests/webpack-merge/input.js b/codemods/html-plugins-to-native-html/tests/webpack-merge/input.js
new file mode 100644
index 0000000..2c2d581
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/webpack-merge/input.js
@@ -0,0 +1,8 @@
+const { merge } = require("webpack-merge");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const base = require("./webpack.base");
+
+module.exports = merge(base, {
+  entry: "./src/index.js",
+  plugins: [new HtmlWebpackPlugin({ title: "App" })],
+});
diff --git a/codemods/html-plugins-to-native-html/tests/with-options/expected.js b/codemods/html-plugins-to-native-html/tests/with-options/expected.js
new file mode 100644
index 0000000..e91e6ff
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/with-options/expected.js
@@ -0,0 +1,10 @@
+module.exports = {
+  output: {
+    html: { title: "My App", meta: { viewport: "width=device-width, initial-scale=1" }, inject: "head", scriptLoading: "blocking", favicon: "./src/favicon.ico" },
+    htmlFilename: "app.html",
+  },
+  experiments: {
+    html: true,
+  },
+  entry: "./src/index.js",
+};
diff --git a/codemods/html-plugins-to-native-html/tests/with-options/input.js b/codemods/html-plugins-to-native-html/tests/with-options/input.js
new file mode 100644
index 0000000..a725b2e
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/with-options/input.js
@@ -0,0 +1,17 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: "app.html",
+      title: "My App",
+      meta: { viewport: "width=device-width, initial-scale=1" },
+      inject: "head",
+      scriptLoading: "blocking",
+      favicon: "./src/favicon.ico",
+      minify: true,
+      cache: false,
+    }),
+  ],
+};
diff --git a/codemods/html-plugins-to-native-html/tests/workflow.test.mjs b/codemods/html-plugins-to-native-html/tests/workflow.test.mjs
new file mode 100644
index 0000000..e3dcbf0
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/tests/workflow.test.mjs
@@ -0,0 +1,84 @@
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import { cpSync, mkdtempSync, readFileSync, readdirSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import test from "node:test";
+
+const workspace = fileURLToPath(new URL("../", import.meta.url));
+const fixture = path.join(workspace, "tests/integration/project");
+const files = readdirSync(fixture, { recursive: true, withFileTypes: true })
+  .filter((entry) => entry.isFile())
+  .map((entry) => path.relative(fixture, path.join(entry.parentPath, entry.name)));
+
+function runWorkflow(target, dryRun = false) {
+  assert.ok(process.env.npm_execpath, "Run this test through npm run test:integration");
+  execFileSync(process.execPath, [
+    process.env.npm_execpath, "exec", "--", "codemod", "workflow", "run",
+    "--workflow", path.join(workspace, "workflow.yaml"), "--target", target,
+    "--allow-dirty", "--no-interactive", "--disable-analytics",
+    ...(dryRun ? ["--dry-run"] : []),
+  ], { cwd: workspace, encoding: "utf8", timeout: 120_000, stdio: "pipe" });
+}
+
+test("workflow applies HTML and dependency edits through the runner, without fs permission", () => {
+  const target = mkdtempSync(path.join(tmpdir(), "webpack-html-workflow-"));
+  try {
+    cpSync(fixture, target, { recursive: true });
+    execFileSync("git", ["init", "--quiet", target]);
+    runWorkflow(target, true);
+    for (const file of files) {
+      assert.deepEqual(readFileSync(path.join(target, file)), readFileSync(path.join(fixture, file)),
+        `dry run modified ${file}`);
+    }
+
+    runWorkflow(target);
+    const html = readFileSync(path.join(target, "src/index.html"), "utf8");
+    assert.match(html, /<!-- webpackChunkName: "main" -->/);
+    const namedHtml = readFileSync(path.join(target, "packages/named/index.html"), "utf8");
+    assert.match(namedHtml, /<!-- webpackChunkName: "app" -->/);
+    assert.equal(namedHtml.match(/<script/g)?.length, 1);
+    assert.equal(html.match(/<script defer src="\.\/index.js"><\/script>/g)?.length, 1);
+    const config = readFileSync(path.join(target, "webpack.config.cjs"), "utf8");
+    assert.match(config, /entry: "\.\/src\/index.html"/);
+    assert.match(config, /minimizeOptions: \{ html: false \}/);
+    assert.doesNotMatch(config, /new HtmlWebpackPlugin/);
+    assert.deepEqual(readFileSync(path.join(target, "unrelated.html")), readFileSync(path.join(fixture, "unrelated.html")));
+    const rootManifest = JSON.parse(readFileSync(path.join(target, "package.json"), "utf8"));
+    assert.ok(rootManifest.devDependencies["html-webpack-plugin"], "a skipped config still uses this package");
+    assert.ok(rootManifest.devDependencies["html-loader"], "the retained legacy loader still uses this package");
+    const migrated = JSON.parse(readFileSync(path.join(target, "packages/migrated/package.json"), "utf8"));
+    assert.equal(migrated.devDependencies["html-webpack-plugin"], undefined);
+    assert.equal(migrated.devDependencies["html-loader"], undefined);
+    for (const file of ["package.json", "webpack.config.cjs", "index.html"]) {
+      const relative = `packages/legacy-loader/${file}`;
+      assert.deepEqual(readFileSync(path.join(target, relative)), readFileSync(path.join(fixture, relative)));
+    }
+    assert.equal(migrated.devDependencies["favicons-webpack-plugin"], undefined);
+    for (const name of ["dynamic-reference", "inline-loader"]) {
+      const relative = `packages/${name}/package.json`;
+      assert.deepEqual(readFileSync(path.join(target, relative)), readFileSync(path.join(fixture, relative)),
+        `AST reference scan removed a used package from ${name}`);
+    }
+    const referenceManifest = "packages/references/package.json";
+    const expectedReferences = JSON.parse(readFileSync(path.join(fixture, referenceManifest), "utf8"));
+    delete expectedReferences.devDependencies["webpack-subresource-integrity"];
+    assert.deepEqual(JSON.parse(readFileSync(path.join(target, referenceManifest), "utf8")), expectedReferences);
+    const dynamicLiteral = JSON.parse(readFileSync(path.join(target, "packages/dynamic-literal/package.json"), "utf8"));
+    assert.deepEqual(dynamicLiteral.devDependencies, { "webpack-subresource-integrity": "^5.2.0" });
+    const faviconConfig = readFileSync(path.join(target, "packages/migrated/webpack.config.cjs"), "utf8");
+    assert.match(faviconConfig, /favicon: "\.\/logo.png"/);
+    assert.match(faviconConfig, /generate the required icon sizes\/formats and web app manifest manually/);
+    const skipped = "packages/skipped/webpack.config.cjs";
+    assert.deepEqual(readFileSync(path.join(target, skipped)), readFileSync(path.join(fixture, skipped)));
+
+    const once = files.map((file) => readFileSync(path.join(target, file)));
+    runWorkflow(target);
+    for (const [index, file] of files.entries()) {
+      assert.deepEqual(readFileSync(path.join(target, file)), once[index], `second run modified ${file}`);
+    }
+  } finally {
+    rmSync(target, { recursive: true, force: true });
+  }
+});
diff --git a/codemods/html-plugins-to-native-html/workflow.yaml b/codemods/html-plugins-to-native-html/workflow.yaml
new file mode 100644
index 0000000..a4f56e4
--- /dev/null
+++ b/codemods/html-plugins-to-native-html/workflow.yaml
@@ -0,0 +1,45 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/codemod-com/codemod/refs/heads/main/schemas/workflow.json
+
+version: "1"
+
+nodes:
+  - id: apply-transforms
+    name: Apply AST Transformations
+    type: automatic
+    runtime:
+      type: direct
+    steps:
+      - name: Migrate html-webpack-plugin and html-loader to webpack's native HTML support and minification
+        js-ast-grep:
+          js_file: src/workflow.ts
+          base_path: .
+          include:
+            - "**/*.cjs"
+            - "**/*.js"
+            - "**/*.jsx"
+            - "**/*.mjs"
+            - "**/*.cts"
+            - "**/*.mts"
+            - "**/*.ts"
+            - "**/*.tsx"
+          exclude:
+            - "**/node_modules/**"
+          language: typescript
+      - name: Add previous entry scripts to migrated HTML templates
+        js-ast-grep:
+          js_file: src/templates.ts
+          base_path: .
+          include:
+            - "**/*.html"
+          exclude:
+            - "**/node_modules/**"
+          language: html
+      - name: Remove unused HTML plugins and loaders from package.json
+        js-ast-grep:
+          js_file: src/remove-dependencies.ts
+          base_path: .
+          include:
+            - "**/package.json"
+          exclude:
+            - "**/node_modules/**"
+          language: json
diff --git a/package-lock.json b/package-lock.json
index 3f0ce0f..47a00a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,16 @@
         "@codemod.com/jssg-types": "^1.6.2"
       }
     },
+    "codemods/html-plugins-to-native-html": {
+      "name": "@webpack/html-plugins-to-native-html",
+      "version": "0.0.0",
+      "dependencies": {
+        "@webpack/codemod-utils": "*"
+      },
+      "devDependencies": {
+        "@codemod.com/jssg-types": "^1.6.2"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
@@ -1029,6 +1039,10 @@
       "resolved": "codemods/css-plugins-to-native-css",
       "link": true
     },
+    "node_modules/@webpack/html-plugins-to-native-html": {
+      "resolved": "codemods/html-plugins-to-native-html",
+      "link": true
+    },
     "node_modules/acorn": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
diff --git a/packages/codemod-utils/src/index.ts b/packages/codemod-utils/src/index.ts
index 70beff8..61b4478 100644
--- a/packages/codemod-utils/src/index.ts
+++ b/packages/codemod-utils/src/index.ts
@@ -15,6 +15,7 @@ import type { ModuleBinding } from "./imports";
 
 export * from "./ast";
 export * from "./imports";
+export * from "./syntax";
 
 // ---------- webpack config helpers ----------
 
diff --git a/packages/codemod-utils/src/syntax.ts b/packages/codemod-utils/src/syntax.ts
new file mode 100644
index 0000000..ce2cce5
--- /dev/null
+++ b/packages/codemod-utils/src/syntax.ts
@@ -0,0 +1,139 @@
+import type Js from "@codemod.com/jssg-types/langs/javascript";
+import type { SgNode } from "@codemod.com/jssg-types/main";
+import { parse } from "codemod:ast-grep";
+
+import { namedChildren } from "./ast";
+
+function decodeEscape(text: string): string | null {
+  const escaped = text.slice(1);
+  const simple: Record<string, string> = {
+    n: "\n",
+    r: "\r",
+    t: "\t",
+    b: "\b",
+    f: "\f",
+    v: "\v",
+    "\n": "",
+    "\r": "",
+    "\r\n": "",
+  };
+
+  if (Object.hasOwn(simple, escaped)) {
+    return simple[escaped];
+  }
+
+  if (/^[0-7]{1,3}$/.test(escaped)) {
+    return String.fromCharCode(Number.parseInt(escaped, 8));
+  }
+
+  if (/^x[\da-f]{2}$/i.test(escaped)) {
+    return String.fromCharCode(Number.parseInt(escaped.slice(1), 16));
+  }
+
+  if (/^u[\da-f]{4}$/i.test(escaped)) {
+    return String.fromCharCode(Number.parseInt(escaped.slice(1), 16));
+  }
+
+  if (/^u\{[\da-f]+\}$/i.test(escaped)) {
+    const codePoint = Number.parseInt(escaped.slice(2, -1), 16);
+
+    return codePoint <= 0x10ffff ? String.fromCodePoint(codePoint) : null;
+  }
+
+  return escaped.length === 1 ? escaped : null;
+}
+
+// Read literal values from syntax nodes without evaluating user code.
+// Escape decoding operates on individual escape tokens, not source patterns.
+export function staticString(node: SgNode<Js> | null | undefined): string | null {
+  if (!node) {
+    return null;
+  }
+
+  if (node.is("parenthesized_expression")) {
+    return staticString(namedChildren(node).find((child) => !child.is("comment")));
+  }
+
+  if (node.is("binary_expression") && node.field("operator")?.is("+")) {
+    const left = staticString(node.field("left"));
+    const right = staticString(node.field("right"));
+
+    return left === null || right === null ? null : left + right;
+  }
+
+  if (!node.is("string") && !node.is("template_string")) {
+    return null;
+  }
+
+  let result = "";
+
+  for (const child of namedChildren(node)) {
+    if (child.is("string_fragment")) {
+      result += child.text();
+    } else if (child.is("escape_sequence")) {
+      const value = decodeEscape(child.text());
+
+      if (value === null) {
+        return null;
+      }
+
+      result += value;
+    } else {
+      return null;
+    }
+  }
+
+  return result;
+}
+
+function unwrapParentheses(node: SgNode<Js>): SgNode<Js> {
+  while (node.is("parenthesized_expression")) {
+    const inner = namedChildren(node).find((child) => !child.is("comment"));
+
+    if (!inner) {
+      break;
+    }
+
+    node = inner;
+  }
+
+  return node;
+}
+
+// Compare syntax while ignoring trivia and redundant parentheses. Operators,
+// property order, optional chaining, and other executable tokens still matter.
+export function sameSyntax(left: SgNode<Js>, right: SgNode<Js>): boolean {
+  left = unwrapParentheses(left);
+  right = unwrapParentheses(right);
+
+  if (!left.is(right.kind())) {
+    return false;
+  }
+
+  if (left.is("string")) {
+    const value = staticString(left);
+
+    if (value !== null) {
+      return value === staticString(right);
+    }
+  }
+
+  const leftChildren = left.children().filter((node) => !node.is("comment"));
+  const rightChildren = right.children().filter((node) => !node.is("comment"));
+
+  if (!leftChildren.length && !rightChildren.length) {
+    return left.text() === right.text();
+  }
+
+  return (
+    leftChildren.length === rightChildren.length &&
+    leftChildren.every((node, index) => sameSyntax(node, rightChildren[index]))
+  );
+}
+
+export function parseExpression(source: string): SgNode<Js> {
+  const root = parse<Js>("typescript", `(${source})`);
+  const statement = namedChildren(root.root())[0];
+
+  return unwrapParentheses(namedChildren(statement)[0]);
+}