Start » Cheatsheet » webpack-encore: Platzhalter bei Dateien und Ordnerstrukturen

webpack-encore: Platzhalter bei Dateien und Ordnerstrukturen

Januar 5, 2021

TL;DR

Das Webpack Encore am Ende reines Webpack laufen lässt, hatte ich bereits hier angesprochen.

Aber in manchen Situationen haben wir eine webpack.config.js ein paar Abhängigkeiten und wir müssen Dateien von A nach B kopieren.

Das könnte mit Webpack Encore so aussehen:

...

Encore.copyFiles({
    from: './resources/images',
    to: './images/[name].[ext]',
});

...

In einem anderen Moment, möchten wir den Fonts-Ordner umbenennen und wenn wir schon dabei sind, entfernen wir noch die Hash-Werte an Bildern.

Das ginge dann in die Richtung:

...

Encore.configureFilenames({
    images: './images/[folder]/[name].[ext]',
    fonts: './fonts/[folder]/[name].[ext]',
});

...

Der Punkt ist, wir arbeiten manchmal mit Dateien und/order Ordnerstrukturen und darin gibt es gewisse Platzhalter.

Diese Platzhalter gehen auf loader-utils::interpolateName zurück.

Letztendlich eine Webpack Klasse die in jeden Loader injected wird.

Zur Zeit (webpack v5.11) sind folgende Platzhalter gültig:

Platzhalter	Type	Default	Beschreibung
`[ext]`	`String`	file.extname	Die Dateierweiterung der Zieldatei/Ressource.
`[name]`	`String`	file.basename	Der Basisname der Datei/Ressource.
`[path]`	`String`	file.directory	Der Pfad der Ressource relativ zum webpack/config-Kontext.
`[folder]`	`String`	file.folder	Der Ordner, in dem sich die Ressource befindet.
`[query]`	`String`	file.query	Die Abfrage der Ressource, z. B. `?foo=bar`.
`[emoji]`	`String`	undefined	Eine zufällige Emoji- Darstellung des Inhalts.
`[emoji:<length>]`	`String`	undefined	Dasselbe wie oben, aber mit einer anpassbaren Anzahl von Emojis
`[hash]`	`String`	md4	Gibt die Hash-Methode an, die für das Hashing des Dateiinhalts verwendet werden soll.
`[contenthash]`	`String`	md4	Legt die Hash-Methode fest, die zum Hashing des Dateiinhalts verwendet werden soll.
`digestType`	`String`	hex	Der Digest, den die Hash- Funktion verwenden soll. Gültige Werte sind: base26, base32, base36, base49, base52, base58, base62, base64 und hex.
`hashType`	`String`	md4	Der Typ des Hashwert, den die Hashfunktion verwenden soll. Gültige Werte sind: md4, md5, sha1, sha256 und sha512.
`length`	`Number`	undefined	Benutzer können auch eine Länge für den berechneten Hashwert angeben.
`[N]`	`String`	undefined	Die n-te Übereinstimmung, die sich aus dem Abgleich des aktuellen Dateinamens mit der regExp ergibt.

Tags: liste, webpack, webpack-encore