Looking for reactjs Keywords? Try Ask4Keywords

ReactEinrichten eines grundlegenden Webpacks, Reagieren und Babel-Umgebung


Bemerkungen

Diese Build-Pipeline ist nicht genau das, was Sie als "produktionsbereit" bezeichnen würden, aber es ist ein guter Anfang, um die Dinge hinzuzufügen, die Sie benötigen, um die gewünschte Entwicklungserfahrung zu erhalten. Einige Leute verfolgen (manchmal auch ich selbst) eine komplett aufgebaute Pipeline von Yeoman.io oder woanders und entfernen dann die Dinge, die sie nicht wollen, bis sie ihrem Stil entsprechen. Daran ist nichts falsch, aber vielleicht können Sie sich für das obige Beispiel für den umgekehrten Ansatz entscheiden und aus nackten Knochen aufbauen.

Einige Dinge, die Sie vielleicht hinzufügen möchten, sind Dinge wie ein Testframework und Abdeckungsstatistiken wie Karma mit Mocha oder Jasmin. Fusseln mit ESLint. Hot-Modul-Austausch im Webpack-Dev-Server, damit Sie diese Erfahrung mit Ctrl + S, F5 machen können. Außerdem wird die aktuelle Pipeline nur im dev-Modus erstellt, sodass eine Produktionsaufgabe gut ist.

Gotchas!

Beachten Sie in der context webpack.config.js der webpack.config.js wir den Pfad webpack.config.js des webpack.config.js definiert haben, anstatt __dirname mit der Zeichenfolge /src verketten . Um die Lösung plattformübergreifender zu machen, verwenden Sie den Hebelknoten, um uns zu helfen.

Erläuterung der Eigenschaften von webpack.config.js

Kontext

Dies ist der Dateipfad, für den Webpack als Stammpfad zum Auflösen relativer Dateipfade verwendet wird. In index.jsx, wo wir „request require('./index.html') , wird der Punkt tatsächlich in das Verzeichnis src/ da wir ihn in dieser Eigenschaft als solche definiert haben.

Eintrag

Wo Webpack an erster Stelle steht, beginnt die Lösung. Deshalb sehen Sie in der index.jsx, dass wir die Lösung mit Anforderungen und Importen zusammennähen.

Ausgabe

Hier definieren wir, wo das Webpack die Dateien ablegen soll, die es als Bundle gefunden hat. Wir haben auch einen Namen für die Datei definiert, in der unser gebündeltes Javascript und unsere Styles gelöscht werden.

devServer

Dies sind spezifische Einstellungen für den Webpack-Dev-Server. Die contentBase legt fest, wo der Server sein root sein soll. Wir haben hier den Ordner dist/ als Basis definiert. Der port ist der Port, auf dem der Server gehostet wird. open wird der webpack-dev-server angewiesen, Ihren Standardbrowser für Sie zu öffnen, sobald der Server hochgefahren ist.

Modul> Lader

Dies definiert ein Mapping, das Webpack verwenden soll, sodass es weiß, was zu tun ist, wenn andere Dateien gefunden werden. Die test -Eigenschaft gibt regex für webpack an, um zu bestimmen, ob es dieses Modul anwenden soll. In den meisten Fällen haben wir Übereinstimmungen mit Dateierweiterungen. loader oder loaders geben den Namen des Loader-Moduls an, mit dem wir die Datei in das Webpack laden möchten, und sorgen dafür, dass der Loader die Bündelung dieses Dateityps übernimmt. Es gibt auch eine query Eigenschaft im Javascript, diese enthält lediglich eine Abfragezeichenfolge für den Loader. Daher hätten wir wahrscheinlich auch eine Query-Eigenschaft für den HTML-Loader verwenden können, wenn wir dies wollten. Es ist nur eine andere Art, Dinge zu tun.

Einrichten eines grundlegenden Webpacks, Reagieren und Babel-Umgebung Verwandte Beispiele