The local inspector checks notes-to-notes and settings-to-settings ownership. The starting notes fixture matches its entry and root. Changing its entry to settings produces a wrong-entry mismatch; an empty root reports a missing root, while a different root reports a wrong-root mismatch. Copyable configuration scopes each plugin instance to its own entry; no webpack compilation is claimed.
Work through the example
Set Entry to settings while keeping Page notes and Root notes, then Check mapping. The mismatch identifies the wrong entry before a mount is accepted. Restore notes but change Root to settings to isolate the wrong-root case. Keep actual emitted content-hash filenames blank until a native build supplies them; the pattern is not an observed asset name.
Keep the wrong-entry and wrong-root cases independent. Adding another root to hide a mismatch defeats the check. One output page needs one generation owner. In a retained plugin project, record pinned versions and inspect actual emitted assets before checking native mounting. A native-HTML migration needs its own version-qualified acceptance rather than two writers targeting the same HTML files.
Read the current status before choosing the build owner
The current html-webpack-plugin repository README marks the plugin deprecated and explains that existing setups retain HTML ownership until migration. This article therefore treats the plugin route as maintenance of an existing pinned project, not an unconditional new-install recommendation.
Webpack's native HTML guide describes an alternative and identifies experiments.html as experimental. Its current version-specific behavior is not evidence of the webpack release installed in your project or stable webpack v6 behavior.
Choose one owner for notes.html and settings.html. In the retained plugin case, do not separately configure native generation of those same outputs. In a later migration case, retire the replaced generation path deliberately and verify its version-supported replacement.
Give each page its own root and marker
The original fixture has these relationships:
| Output page | Proposed template | JavaScript entry | Required root | Expected mounted text |
|---|---|---|---|---|
| notes.html | src/notes-template.html | src/notes.js | #notes | NOTES |
| settings.html | src/settings-template.html | src/settings.js | #settings | SETTINGS |
Each template has exactly one instance of its required root. Notes uses page title Notes practice; settings uses Settings practice. The expected marker begins absent and is inserted only by the matching entry after it finds its root.
The notes entry should find #notes and set its text to NOTES. The settings entry should find #settings and set its text to SETTINGS. Missing roots produce a clearly identifiable failure rather than silently mounting somewhere else.
The uppercase words are original test markers, not a complete notes application or settings service. There is no form, account, persistence, remote request, or actual saved setting in this fixture.
Keep document title and static heading separate from the dynamic marker. A static heading reading NOTES would not prove that the notes bundle ran.
Specify the retained plugin baseline
Use one plugin instance for each page. The authoring specification is:
entry:
notes -> ./src/notes.js
settings -> ./src/settings.js
output filename pattern:
[name].[contenthash].js
plugin instance for notes:
filename: notes.html
template: ./src/notes-template.html
chunks: ['notes']
plugin instance for settings:
filename: settings.html
template: ./src/settings-template.html
chunks: ['settings']
The plugin README documents template selection, chunk filtering, and multiple HTML outputs. The specification above must still be translated into the installed project's supported configuration and tested natively.
For this constrained baseline, the intended application script for notes.html is the notes entry's emitted bundle; settings.html uses the settings entry's emitted bundle. Do not handwrite a content hash in the template or invent an actual asset filename in the ledger.
Let the chosen HTML owner reference the assets from the current compilation. Do not add a second manual script tag that loads the same entry again, or leave an old script path beside the newly injected one.
Recreate this example
Build one self-contained responsive HTML example titled “HTML Webpack Plugin template: match page and entry” for readers completing the stated task. Return the complete HTML with embedded CSS and JavaScript. Use no remote fonts, libraries, images, requests, account connections, or saved-state claims.
Use notes.html with src/notes.js, root #notes and marker NOTES; settings.html uses src/settings.js, root #settings and marker SETTINGS. Page, entry and root inputs default to notes. Check mapping requires agreement, rejects unknown page/entry values, reports a missing root for blank input, and distinguishes wrong entry from wrong root. Input edits retire the verdict until the next check. Show copyable plugin config with two entry names, output[name].[contenthash].js, splitChunks/runtimeChunk false, per-page filename/template/chunks. Do not invent emitted hashes or actual mount. Current repository deprecation and version-qualified native HTML migration are context; keep one output generator owner, never configure two writers for same output.
Use a multi-page ownership inspector with output/entry/root contracts and configuration source design with a compact header. Keep the actual sample data, controls, and useful default result visible early on a 360px-wide screen. Use readable text at least 16px, generous paragraph spacing, strong contrast, semantic labels, visible keyboard focus, and wrapping source blocks. Stack records on narrow screens rather than forcing a wide table.
Wire each action to an explicit type=button click handler using element selectors; the host permits scripts but blocks form submission. Update the visible result when the described action occurs. Show specific error feedback for invalid or missing input and clear stale feedback after dependent inputs change. Use plain text when displaying user values.
The manifest checker does not run webpack, create emitted bundles or prove native browser mounting. Keep the source fixture and worked teacher or developer example distinct from actual user records. Include the domain-specific explanation and next check beside the result. Provide no fake download, send, deployment, approval, or persistence button. Everything operates locally for the current page session.
Review the prepared copy in NOS
Take the page-to-entry contract into the native build and verify each emitted script and mounted marker. NOS can render a prepared ownership explanation; eligible static configuration notes can be revised visually. The real build manifest and browser mount observations decide whether the integration works.