Method apply

lib/dependencies/HtmlEntryDependency.js:451–662

* Applies the plugin by registering its hooks on the compiler. * @param {Dependency} dependency the dependency for which the template should be applied * @param {ReplaceSource} source the current replace source which can be modified * @param {DependencyTemplateContext} templateContext the cont

(dependency, source, templateContext)

	 * @returns {void}
	 */
	apply(dependency, source, templateContext) {
		const { runtimeTemplate } = templateContext;
		const dep = /** @type {HtmlEntryDependency} */ (dependency);
		const compilation = runtimeTemplate.compilation;
		const { chunkGraph } = compilation;
		const { crossOriginLoading } = compilation.outputOptions;
		const entrypoint = /** @type {Entrypoint | undefined} */ (
			compilation.entrypoints.get(dep.entryName)
		);

		if (!entrypoint) {
			source.replace(dep.range[0], dep.range[1] - 1, "data:,");
			return;
		}

		const orderedChunks = getEntrypointChunksInLoadOrder(entrypoint);
		const entryChunk = orderedChunks[orderedChunks.length - 1];
		const isStylesheet = dep.elementKind === "stylesheet";

		// Rewrite src/href to a chunk-URL sentinel (resolved by renderManifest):
		// `.css` for `<link rel="stylesheet">`, `.js` for everything else.
		const entryContentHashType = isStylesheet ? "css" : "javascript";
		const entryUrl = HtmlGenerator.makeChunkUrlSentinel(
			entryChunk,
			entryContentHashType
		);
		source.replace(dep.range[0], dep.range[1] - 1, entryUrl);

		if (dep.tagStart < 0 || dep.tagOpenEnd <= dep.tagStart) {
			return;
		}

		// The browser must load every chunk the entry needs, not just the
		// entry chunk. For `<script>` entries that's the JS for sibling
		// chunks plus — critically — the CSS for any chunk that holds
		// stylesheets imported transitively from the JS source. Previously
		// every sibling was cloned as a `<script>` pointing at a `.js`
		// filename, so CSS chunks ended up as `<script src="foo.css">`
		// pointing at non-existent `.js` files (the bug in
		// html-webpack-plugin#1838 / webpack/mini-css-extract-plugin#959,
		// magnified here because the entry chunk's own CSS was emitted to
		// disk but never linked from the HTML at all).
		const originalContent = /** @type {string} */ (source.original().source());
		const originalTag = originalContent.slice(dep.tagStart, dep.tagOpenEnd);
		const srcStartInTag = dep.range[0] - dep.tagStart;
		const srcEndInTag = dep.range[1] - dep.tagStart;
		// Non-native originating elements (a custom element mapped to a
		// `script`/`stylesheet` source `type`) can't be cloned verbatim — the
		// clone would be invalid markup (e.g. `<my-script …></script>`), so a
		// real native tag is synthesized instead. Decided at parse time from the
		// tag name (`dep.tagIsNative`) rather than re-parsing the source text.
		const tagIsNative = dep.tagIsNative;

		// `crossorigin` to mirror `output.crossOriginLoading` onto every injected
		// tag. Empty when the option is off or the originating tag already set
		// `crossorigin` (author value wins, flagged at parse time). Mirrors
		// webpack's runtime, which sets `crossOrigin` on chunk-loading scripts,
		// and matches Vite, which emits it on every injected script/stylesheet.