Wie benutze ich gulp webpack-stream um eine richtige benannte Datei zu generieren?
Gegenwärtig verwenden wir Webpack für unseren Modullader und Gulp für alles andere (sass - & gt; css und den dev / production build-Prozess)
Ich möchte das Webpack-Zeug in den Schluck ziehen, also muss ich nur gulp eingeben und es startet, beobachtet und startet webpack und den Rest von dem, was unser Schluck zu tun hat.
Also habe ich webpack-stream gefunden und implementiert.
%Vor%Das Problem ist, dass es einen zufälligen Charakternamen für die .js-Datei generiert, wie sollen wir das in unserer App verwenden?
Das obige kompiliert src / entry.js in Assets mit webpack in dist / mit dem Ausgabedateinamen von [hash] .js (webpack generierter Hash des Builds).
Wie benennst du diese Dateien? Auch die neue Schluck-Aufgabe erzeugt immer dann eine neue Datei, wenn ich eine Bearbeitung speichere:
Ich kann c2212af8f732662acc64.js nicht verwenden. Ich brauche bundle.js oder etwas anderes normales.
Unsere Webpack-Konfiguration:
%Vor%4 Antworten
Ah, ich lese etwas weiter und habe es herausgefunden:
%Vor% ^ hier kann ich einfach meine eigentliche webpack.config übergeben und es werden die Pfade verwendet, die ich dort bereits eingestellt habe. In meinem Fall habe ich nur app/assets/js entfernt, da ich diesen Pfad jetzt im Moment habe.
Immer noch keine irdische Idee, warum mit der ersten Aufgabe, die ich erstellt habe, zufällige Hash-Dateinamen erzeugt?
Es gab einen Kommentar zu Leon Gabans Antwort, wie seine webpack.config.js aussah. Anstatt das in einem Kommentar zu beantworten, gebe ich es hier, damit es besser formatiert.
In den Dokumenten für webpack-stream "können Sie die Webpack-Optionen mit dem ersten Argument übergeben" ...
Also habe ich Folgendes getan, um zu erzwingen, dass webpack jedes Mal denselben Ausgabe-Namen verwendet (für mich habe ich bundle.js verwendet):
%Vor%Der Schlüssel sind die Optionen in webpack (), die sind:
%Vor% Wie in der Dokumentation empfohlen, sollten Sie das Paket vinyl-named in der Pipe vor webpack-stream verwenden. Auf diese Weise können Sie eine sauberere Webpack-Konfiguration verwenden. Das Folgende ist die Taskdefinition, die ich selbst verwende:
Das einzige Problem, mit dem ich bei dieser Aufgabendefinition konfrontiert werde, ist, dass der Unterordner gelöst wird. Zum Beispiel wird ./src/components/application.spec.js ./build/application.spec.js anstelle von ./build/components/application.spec.js erzeugen.
Anstatt Ihrem Javascript einen festen Dateinamen zu geben, wäre eine bessere Lösung, gulp-inject zu verwenden und den generierten Hash-Dateinamen in ein Skript-Tag einzufügen. Dies bedeutet, dass Sie sich nicht um den Ablauf des Cache im kompilierten Javascript kümmern müssen (weshalb der Hash-Dateiname überhaupt verwendet wird).
und natürlich brauchst du den inject-Bereich in deinem src/index.html :
Tags und Links javascript webpack webpack-dev-server gulp