Nachdem ich ein Projekt erstellt habe, habe ich index.html, bundle.js und einige .css-Dateien. Ich möchte, dass sie in einer Verzeichnisstruktur wie folgt platziert werden:
%Vor%Hier ist, was ich für die .js und .css getan habe:
%Vor%Hier ist die entsprechende Modulkonfiguration:
%Vor% Ich habe keine Ahnung, wie man index.html
aus einem Ordner kopiert und unter dist / setzt. Ich weiß, dass file-loader
benötigt wird, aber was soll ich unter entry
und output
schreiben?
Danke!
Ich habe es herausgefunden und hier ist die Lösung:
%Vor% Um die CSS-Datei unter dist/css/
:
Ich habe das ExtractTextPlugin verwendet. Um den Ausgabepfad der CSS-Datei zu konfigurieren, musste ich es im Abschnitt plugins
definieren:
So verschieben Sie Bilder und Schriftarten in einen eigenen Ordner:
%Vor% Achten Sie darauf, wie die Zeichenfolge loader
definiert ist: &name=img/[name].[ext]
bedeutet, dass Sie den Namen und die Erweiterung der ursprünglichen Datei verwenden und sie unter dem Ordner img / ablegen. Gleiches gilt für die Font-Dateien.
Hier ist die komplette Konfigurationsdatei:
%Vor% Du wirst nicht all das Zeug brauchen, ich möchte nur das große Bild zeigen, wie es mit allem an seinem Platz aussieht. Achten Sie nur auf output
, loaders
und plugins
Sehen Sie sich das html-webpack-plugin für webpack an. Es wird Ihre index.html-Datei dynamisch für Sie erstellen und in einen bestimmten Ordner stellen.
Tags und Links webpack