Ich versuche , von sich zu bewegen Gulp
zu Webpack
. In Gulp
Ich habe eine Aufgabe, die alle Dateien und Ordner von / static / Ordner nach / build / Ordner kopiert . Wie mache ich das gleiche mit Webpack
? Benötige ich ein Plugin?
javascript
webpack
Vitalii Korsakov
quelle
quelle
Antworten:
Sie müssen keine Dinge kopieren, das Webpack funktioniert anders als das Schlucken. Webpack ist ein Modulbündler und alles, was Sie in Ihren Dateien referenzieren, wird eingeschlossen. Sie müssen nur einen Loader dafür angeben.
Also, wenn Sie schreiben:
Webpack versucht zunächst, die referenzierte Datei als JavaScript zu analysieren (da dies die Standardeinstellung ist). Das wird natürlich scheitern. Aus diesem Grund müssen Sie einen Loader für diesen Dateityp angeben. Die Datei - oder beispielsweise der URL-Loader - nimmt die referenzierte Datei, legt sie im Ausgabeordner des Webpacks ab (was
build
in Ihrem Fall der Fall sein sollte) und gibt die Hash-URL für diese Datei zurück.Normalerweise werden Lader über die Webpack-Konfiguration angewendet:
Natürlich müssen Sie zuerst den File-Loader installieren, damit dies funktioniert.
quelle
Das Erfordernis von Assets mithilfe des File-Loader-Moduls ist die Art und Weise, wie Webpack verwendet werden soll ( Quelle ). Wenn Sie jedoch mehr Flexibilität benötigen oder eine übersichtlichere Benutzeroberfläche wünschen, können Sie statische Dateien auch direkt mit my
copy-webpack-plugin
( npm , Github ) kopieren . Für diestatic
zumbuild
Beispiel:quelle
Wenn Sie Ihre statischen Dateien kopieren möchten, können Sie den File-Loader folgendermaßen verwenden:
für HTML-Dateien:
in webpack.config.js:
in Ihrer js-Datei:
./static/ ist relativ zu dem Ort, an dem sich Ihre js-Datei befindet.
Sie können das gleiche mit Bildern oder was auch immer tun. Der Kontext ist eine mächtige Methode zum Erkunden !!
quelle
index.html
in ein Unterverzeichnis legt, das es erstellt, genannt_
(Unterstrich). Was ist los?main.js
static
require.context("./static/", true, /^.*/);
Ein Vorteil, den das oben erwähnte Copy-Webpack-Plugin bringt, der zuvor noch nicht erklärt wurde, besteht darin, dass alle anderen hier genannten Methoden die Ressourcen weiterhin in Ihren Bundle-Dateien bündeln (und erfordern, dass Sie sie irgendwo "benötigen" oder "importieren"). Wenn ich nur einige Bilder oder Teilvorlagen verschieben möchte, möchte ich meine Javascript-Bundle-Datei nicht mit nutzlosen Verweisen auf sie überladen, sondern nur, dass die Dateien an der richtigen Stelle ausgegeben werden. Ich habe im Webpack keinen anderen Weg gefunden, dies zu tun. Zugegeben, es ist nicht das, wofür Webpack ursprünglich entwickelt wurde, aber es ist definitiv ein aktueller Anwendungsfall. (@BreakDS Ich hoffe, dies beantwortet Ihre Frage - es ist nur ein Vorteil, wenn Sie es wollen)
quelle
Die obigen Vorschläge sind gut. Aber um zu versuchen, Ihre Frage direkt zu beantworten, würde ich vorschlagen,
cpy-cli
in einem Skript zu verwenden, das in Ihrem definiert istpackage.json
.Dieses Beispiel erwartet
node
irgendwo auf Ihrem Weg.cpy-cli
Als Entwicklungsabhängigkeit installieren :npm install --save-dev cpy-cli
Erstellen Sie dann einige NodeJS-Dateien. Einer zum Kopieren und der andere zum Anzeigen eines Häkchens und einer Meldung.
copy.js
checkmark.js
Fügen Sie das Skript hinzu
package.json
. Vorausgesetzt, Skripte sind in<project-root>/scripts/
So führen Sie den sript aus:
npm run copy
quelle
Höchstwahrscheinlich sollten Sie CopyWebpackPlugin verwenden, das in kevlened answer erwähnt wurde. Alternativ können Sie für einige Arten von Dateien wie .html oder .json auch Raw-Loader oder Json-Loader verwenden. Installieren Sie es über
npm install -D raw-loader
und dann müssen Sie nur noch einen weiteren Loader zu unsererwebpack.config.js
Datei hinzufügen .Mögen:
Hinweis: Starten Sie den Webpack-Dev-Server neu, damit alle Konfigurationsänderungen wirksam werden.
Und jetzt können Sie HTML-Dateien mit relativen Pfaden anfordern. Dies erleichtert das Verschieben von Ordnern erheblich.
quelle
Die Art
images
und Weise, wie ich statisch lade undfonts
:Vergessen Sie nicht zu installieren
file-loader
, damit das funktioniert.quelle
logo.png
noch einen stumpfen und "hoffentlich" eindeutigen Dateinamen erstellen müssen, um eine globale Kollision zu vermeiden. Aus demselben Grund verwenden wir CSS-Module .[path][name].[ext]
und es gibt viel Flexibilität, um dies für eine bestimmte Umgebung oder einen bestimmten Anwendungsfall zu ändern ... File-LoaderSie können bash in Ihr package.json schreiben:
quelle
"build": "webpack && xcopy images dist\\images\\ /S /Y && xcopy css dist\\css\\ /S /Y"
Ich war auch hier fest. Copy-Webpack-Plugin hat bei mir funktioniert.
Allerdings war 'Copy-Webpack-Plugin' in meinem Fall nicht notwendig (ich habe es später erfahren).
Das Webpack ignoriert das
Beispiel für Root-Pfade
Damit dies funktioniert, ohne das 'Copy-Webpack-Plugin' zu verwenden, verwenden Sie '~' in Pfaden
'~' weist das Webpack an, 'images' als Modul zu betrachten
Hinweis: Möglicherweise müssen Sie das übergeordnete Verzeichnis des Bilderverzeichnisses hinzufügen
Besuchen Sie https://vuejs-templates.github.io/webpack/static.html
quelle
Mit der Webpack-Konfigurationsdatei (in Webpack 2) können Sie eine Versprechenskette exportieren, solange der letzte Schritt ein Webpack-Konfigurationsobjekt zurückgibt. Siehe Konfigurationsdokumente für Versprechen . Von dort:
Sie können eine einfache rekursive Kopierfunktion erstellen, die Ihre Datei kopiert und erst danach das Webpack auslöst. Z.B:
quelle
Nehmen wir an, alle Ihre statischen Assets befinden sich in einem Ordner "statisch" auf der Stammebene und Sie möchten sie in den Build-Ordner kopieren, wobei die Struktur des Unterordners beibehalten wird, und dann einfach in Ihre Eingabedatei einfügen
quelle