Webpack 2 Parameterübergabe and den Buildprozess auf der Konsole


Die meisten Beispiele für Webpack enthalten fertige Konfigurationen die als npm scripte hinterlegt sind. Wenn man aber einen automatisierten Build Prozess verwendet z.B. über den TFS, dann möchte man evtl. einige Variablen von außen an den Buildprozess übergeben. Dazu könnte z.B. die “baseUrl” gehören, wenn die Anwendung nicht im Root des Webserver gehostet wird.

Wenn man z.B. angular-starter installiert und man an den Befehle für “build:prod” noch den Namen der Anwendung übergeben möchte, damit dieser als “baseUrl” gesetzt wird, dann sind dafür die folgenden Schritte notwendig.

Anpassen der package.json, hier müssen zwei “- -“ (doppeldashes) entfernt werden, da sonst die Übergabeparameter nicht gesetzt/erkannt werden.

Vorher:

„build:prod“: „npm run clean:dist && npm run webpack — –config config/webpack.prod.js –progress –profile –bail“,

Nachher:

„build:prod“: „npm run clean:dist && npm run webpack –config config/webpack.prod.js –progress –profile –bail“,

Dann passen wir die “webpack.prod.js” an und prüfen ob der “appname” übergeben wurde und erweitern bei Bedarf die “environment” Variable um den Appnamen

Dann wird noch die “webpack.common.js” angepasst und wenn der “appname” gesetzt ist, ersetzen wir die “baseUrl”

jetzt können wir die passende Kommandozeile aufrufen und den passenden “appnamen” übergeben

npm run build:prod — –env.appname „meineAnwendung“

hier können wir jetzt beliebig viele Parameter übergeben z.B.

npm run build:prod — –env.appname „meineAnwendung“ –env.test “../testFolder”

Wenn wir den Befehl ausführen, dann kann man in der Konsole auch unser “console.log” sehen und man sieht das webpack hier ein JSON Objekt erstellt auf das wir entsprechend in der “webpack.prod.js” über die “env” Variable zugreifen können.  Damit lassen sich beliebige Informationen von außen über eine Buildumgebung noch an webpack übergeben.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s