Webpack babel config für Server- und Client-Javascript?

8

Ich versuche herauszufinden, wie man eine einzige Webpack-Konfigurationsdatei hat, die sowohl Server (node.js) js als auch Client js mit der es2015-Voreinstellung transformiert. Momentan muss ich "target: 'node'" speziell dafür einstellen, dass nodebasierte Dateien korrekt verarbeitet werden. Wenn nicht, führt webpack die Transformation basierend auf dem Standard "target: 'web'" aus. Es meldet dann Fehler, weil das 'mysql' Modul, das eindeutig importiert wird, nicht für das Web funktioniert.

Wie kann ich beide in derselben Konfigurationsdatei vereinheitlichen, so dass Server und Client js separat transformiert werden? Oder benötige ich separate Konfigurationen?

Beispiel webpack.config.js

%Vor%

Beispiel js-Code

%Vor%     
Geuis 21.05.2016, 23:30
quelle

1 Antwort

23

Sie können mehrere Konfigurationen übergeben, damit Webpack gleichzeitig verarbeitet werden kann. Geben Sie einfach ein Array von Konfigurationsobjekten zurück.

%Vor%

Zusätzlicher Tipp: Wenn Sie .babel.js als Erweiterung für Ihre Konfigurationsdatei verwenden, führt Webpack sie für Sie durch Babel aus, wodurch Sie ES6 in Ihrer Webpack-Konfiguration verwenden können.

Bonus: das Snippet unter

%Vor%

Dies ist die Konfiguration, die wir auf einer unserer Websites mit einer teilweise gemeinsam genutzten Codebasis und teilweise gemeinsam genutzten Assets verwenden. Es besteht aus drei Webpack-Builds in einem:

  • Browser
  • Server-Assets (Bilder / Fonts / ..., die in servergeneriertem HTML referenziert werden)
  • Servercode (Knoten)

Der Servercode hat einige spezielle Eigenschaften:

  • target: 'node' (Webpack benötigt dies)
  • output.libraryTarget: 'commonjs' (bewirkt, dass Webpack commonjs für entbündelte Bibliotheken verwendet)
  • externals: [ /^(?!\.|\/).+/i, ] (bewirkt, dass Webpack keine Elemente in Knotenmodulen bündelt oder irgendetwas, das kein relativer Pfad ist (beginnend mit . oder / )

Mit dieser Kombination verarbeitet Webpack nur Ihren eigenen Code und greift auf andere Module und Bibliotheken zu. Das bedeutet, dass Ihre Abhängigkeiten mit nativen Bindungen nicht unterbrochen werden, da sie nicht gebündelt werden.

    
Ambroos 23.05.2016, 12:38
quelle

Tags und Links