webpack/examples/manifest-plugin/template.md

This example demonstrates how to use ManifestPlugin.

example.js

_{{example.js}}_

webpack.config.js

_{{webpack.config.js}}_

dist/manifest.json

_{{dist/manifest.json}}_

dist/manifest.yml

_{{dist/manifest.yml}}_

Collecting all initial scripts and styles

Here is a function to be able to get all initial scripts and styles:

const fs = require("fs");

function importEntrypoints(manifest, name) {
	const seen = new Set();

	function getImported(entrypoint) {
		const scripts = [];
		const styles = [];

		for (const item of entrypoint.imports) {
			const importer = manifest.assets[item];

			if (seen.has(item)) {
				continue;
			}

			seen.add(item);

			for (const parent of entrypoint.parents || []) {
				const [parentStyles, parentScripts] = getImported(manifest.entrypoints[parent])
				styles.push(...parentStyles);
				scripts.push(...parentScripts);
			}

			if (/\.css$/.test(importer.file)) {
				styles.push(importer.file);
			} else {
				scripts.push(importer.file);
			}
		}

		return [styles, scripts];
	}

	return getImported(manifest.entrypoints[name]);
}

const manifest = JSON.parser(fs.readFilsSync("./manifest.json", "utf8"));

// Get all styles and scripts by entry name
const [styles, scripts] = importEntrypoints(manifest, "main");

Info

Unoptimized

_{{stdout}}_

Production mode

_{{production:stdout}}_