test: cover all hash placeholders across js/css/html/asset outputs with and without realContentHash#21009
Merged
Conversation
…th and without realContentHash Adds test/configCases/contenthash/hash-placeholders/ to exercise [fullhash]/[chunkhash]/[contenthash] across filename, chunkFilename, cssFilename, cssChunkFilename, htmlFilename, htmlChunkFilename, and assetModuleFilename, with optimization.realContentHash toggled on and off. Verifies that emitted filenames have their placeholders resolved, that the HTML's <img>/<link> URLs and the CSS's url() references match the actual emitted asset filenames, and that the main bundle's chunk URL helper points at real on-disk chunks — the html-webpack-plugin#1814 invariant.
|
Contributor
|
This PR is packaged and the instant preview is available (b3893ec). Install it locally:
npm i -D webpack@https://pkg.pr.new/webpack@b3893ec
yarn add -D webpack@https://pkg.pr.new/webpack@b3893ec
pnpm add -D webpack@https://pkg.pr.new/webpack@b3893ec |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #21009 +/- ##
==========================================
+ Coverage 91.62% 91.63% +0.01%
==========================================
Files 573 573
Lines 59232 59277 +45
Branches 15995 16012 +17
==========================================
+ Hits 54272 54321 +49
+ Misses 4960 4956 -4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new configCases test scenario to ensure webpack resolves hash placeholders consistently across JS/CSS/HTML/asset outputs, and that rewritten URLs in extracted HTML/CSS match the actually emitted filenames (including with optimization.realContentHash on/off), covering the html-webpack-plugin#1814 invariant.
Changes:
- Add a new multi-config test case under
test/configCases/contenthash/hash-placeholders/that emits JS/CSS/HTML/assets into per-config subfolders and togglesoptimization.realContentHash. - Validate on-disk outputs: all expected assets exist, no unresolved placeholder tokens remain, and HTML/CSS URL rewrites point at real emitted files.
- Add minimal fixtures (JS entry + async chunks, HTML/CSS sources, and referenced PNG assets).
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| test/configCases/contenthash/hash-placeholders/webpack.config.js | Defines 6 config variants covering [contenthash], [chunkhash], [fullhash] for JS/CSS/HTML outputs and toggles realContentHash. |
| test/configCases/contenthash/hash-placeholders/test.config.js | Asserts emitted filenames/URLs are consistent and verifies chunk URL resolution logic. |
| test/configCases/contenthash/hash-placeholders/index.js | Entry tests that dynamically import an async JS chunk and an async CSS chunk. |
| test/configCases/contenthash/hash-placeholders/style.css | CSS that references an image via url() to validate URL rewriting. |
| test/configCases/contenthash/hash-placeholders/page.html | HTML referencing image and icon assets to validate URL rewriting. |
| test/configCases/contenthash/hash-placeholders/async.js | Async JS module fixture. |
| test/configCases/contenthash/hash-placeholders/async.css | Async CSS module fixture. |
| test/configCases/contenthash/hash-placeholders/bg.png | Asset fixture referenced by HTML and CSS. |
| test/configCases/contenthash/hash-placeholders/icon.png | Asset fixture referenced by HTML. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+155
to
+157
| const uHelperMatch = bundleContent.match( | ||
| /\.u\s*=\s*\(chunkId\)\s*=>\s*\{[\s\S]*?return\s+"[^"]+"\s*\+\s*chunkId\s*\+\s*"\."\s*\+\s*([\s\S]*?)\s*\+\s*"\.js";/ | ||
| ); |
Comment on lines
+137
to
+140
| // to lazy-load a chunk. Pull every hash literal that lives | ||
| // inside a `__webpack_require__.{u,k}` (JS) / `__webpack_require__.f.css` | ||
| // (CSS) helper, splice it into the templated filename, and | ||
| // confirm the result is a file that exists. |
…function-form chunk helpers Addresses Copilot review feedback on PR #21009: - Adds the CSS chunk URL helper check (__webpack_require__.k) that the comment block promised but the implementation was missing. - Loosens the chunk-URL helper regex to match both arrow and `function`-syntax forms, since `output.environment.arrowFunction: false` switches webpack from one to the other; the same applies to __webpack_require__.h on [fullhash] variants.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Contributor
Types CoverageCoverage after merging claude/add-hash-placeholder-tests-GgfdG into main will be
Coverage Report
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+44
to
+47
| htmlFilename: `cfg${i}/[name].${htmlPlaceholder}.html`, | ||
| htmlChunkFilename: `cfg${i}/[name].${htmlPlaceholder}.html`, | ||
| assetModuleFilename: `cfg${i}/[name].[contenthash][ext]` | ||
| }, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds test/configCases/contenthash/hash-placeholders/ to exercise![]()
/ URLs and the CSS's url() references match
[fullhash]/[chunkhash]/[contenthash] across filename, chunkFilename,
cssFilename, cssChunkFilename, htmlFilename, htmlChunkFilename, and
assetModuleFilename, with optimization.realContentHash toggled on and
off. Verifies that emitted filenames have their placeholders resolved,
that the HTML's
the actual emitted asset filenames, and that the main bundle's chunk
URL helper points at real on-disk chunks — the html-webpack-plugin#1814
invariant.