Reagieren Sie mit Webpack 5

create-react-app Verwendet ab Juli 2021 Webpack 4 . Leider bedeutet dies, dass wir Abhängigkeiten installieren und den Build-Prozess selbst konfigurieren müssen, um mit Webpack 5 zu experimentieren. Dies ist eine Kurzanleitung zum Migrieren von Projekten, die mit create-react-appWebpack 5 erstellt wurden.

1. Neues Projekt erstellen/bestehendes verwenden

npx create-react-app reactw5

Wenn Sie create-react-appdas Projekt früher initialisiert haben, übernimmt es das Bündeln, Transpililieren und andere Optimierungen sofort für Sie. Aber dieses Setup verwendet Webpack 4 und hat mit Webpack 5 keine Verwendung für uns. Wir müssen Webpack 5 zusammen mit anderen Tools installieren und konfigurieren.

Webpack-Abhängigkeiten

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin serve

yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-react

yarn add -D css-loader style-loader @svgr/webpack style-loader url-loader

3. webpack.config.jsDatei auf Stammebene erstellen .

Da wir nun Webpack 5 haben, benötigen wir eine benutzerdefinierte Konfiguration, damit es funktioniert.

*** Dies ist keineswegs eine produktionsfertige Konfiguration. Möglicherweise müssen Sie je nach Bedarf Typoskript, CSS-Pre-/Postprozessoren und andere Optimierungen verarbeiten. Aber hoffentlich genug für den Anfang ***

4. Erstellen Sie eine babel.config.jsonDatei auf der Root-Ebene.

Wir haben eine Reihe von Babel-Plugins installiert, um uns bei React zu helfen. Lassen Sie uns sie konfigurieren.

5. Schließlich aktualisieren Sie die package.jsonDatei.

Nachdem wir Webpack und Babel konfiguriert haben, müssen wir unsere NPM-Skripte ersetzen.

Sie sollten die Anwendung mit starten können the yarn start

Ihre React-App verwendet jetzt Webpack 5. Cheers!

Suggested posts

Die verheerenden Folgen eines Schlaganfalls vermeiden: Aus der Reise einer Familie lernen.

Die verheerenden Folgen eines Schlaganfalls vermeiden: Aus der Reise einer Familie lernen.

Einleitung Ein Schlaganfall ist ein medizinischer Notfall, der jeden jederzeit treffen kann. Sie tritt auf, wenn die Durchblutung eines Teils des Gehirns gestört ist, was zu einem plötzlichen Verlust der Gehirnfunktion führt.

Jest – Ein leistungsstarkes JavaScript-Test-Framework

Jest – Ein leistungsstarkes JavaScript-Test-Framework

Testen ist ein wesentlicher Bestandteil der Softwareentwicklung. Dadurch wird sichergestellt, dass der Code zuverlässig ist, wie erwartet funktioniert und die Fehlerwahrscheinlichkeit verringert wird.

Related posts

Die Cowboy-Lüge

Wie Megakonzerne den Amerikanern eine fette Lüge verkauften

Die Cowboy-Lüge

Es ist ein strahlend goldener Morgen in den sanften Hügeln des Westens, während die ersten Sonnenstrahlen das gefrorene Gras auf den Ebenen erhellen. Eine Herde friedlicher Angus-Rinder, pechschwarz und massig, zeichnet sich vor dem Sonnenaufgang ab, während sie einen ausgetretenen Pfad entlang zu einem Ort geht, den sie alle gut kennen; die Frühstücksbar.

Finanzierung der CO2-Entfernung im Geschäftsjahr 24

Die Aufschlüsselung der Mittelanträge von Carbon180 nach Pfaden

Finanzierung der CO2-Entfernung im Geschäftsjahr 24

Von Alyson Lee, geschäftsführende Beraterin für Regierungsangelegenheiten Der jährliche Bewilligungsprozess der Bundesregierung ist von zentraler Bedeutung für unsere Bemühungen zur Finanzierung der Kohlendioxidentfernung (CDR). Jedes Jahr reicht Carbon180 Anfragen an verschiedene Kongressbüros ein, um zu bestimmen, wohin die Dollars im nächsten Jahr fließen werden.

Wie man den Planeten rettet und Geld verdient

Wie man den Planeten rettet und Geld verdient

Wie oft haben Sie ohne nachzudenken eine Plastikflasche, ein Glas, eine Aluminiumdose oder ein Öko-Energiepaket weggeworfen? Wie oft haben Sie sich gewünscht, dass Sie für das Recycling etwas zurückbekommen könnten? Wenn Sie wie die meisten Menschen sind, lautet die Antwort wahrscheinlich „vielfach“. Recycling wird oft als Ärger, lästige Pflicht oder Pflicht angesehen, die keinen unmittelbaren oder greifbaren Nutzen bringt.

Die „Learning at Work Week“ ist wichtiger als Sie denken

Die „Learning at Work Week“ ist wichtiger als Sie denken

Es fällt uns oft schwer, das umzusetzen, von dem wir wissen, dass es gut für uns ist. Von der Aussage, dass wir einen Lebensgefährten lieben, bis hin zur Erinnerung daran, wie ein Pirat zu reden – es wird immer diejenigen geben, die behaupten, dass ein Tag, eine Woche oder ein Monat voller Ereignisse nicht nötig sei, weil sie diese Dinge bereits tun.