Dieses Mal werde ich Ihnen die Verwendung von Webpack Hot Refresh und Hot Loading ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von Webpack Hot Refresh und Hot Loading? sehen.
Webpack ist sehr leistungsstark und ein vernünftiges Gerüst kann uns viel mühsame und sinnlose Arbeit ersparen. Unter anderem verbessern Hot Refresh und Hot Loading die Entwicklungsgeschwindigkeit im Vergleich zur herkömmlichen Entwicklung erheblich.
Entdecken Sie den Unterschied zwischen Hot Refresh und Hot Loading vom Gerüst aus
Ich glaube, dass die meisten Vue-Entwickler mit Vue-CLI beginnen und viele Anfänger problemlos mit dem Vue-Projekt arbeiten Ich wage es nicht, die Konfiguration von vue-cli nach Belieben zu ändern (schließlich ist Webpack in der Tat sehr kompliziert und vue-cli hat auch viel Arbeit geleistet, um das Erlebnis für Anfänger zu optimieren).
Im Gegensatz dazu bietet React kein relativ robustes Gerüst (zumindest wird es von mir offensichtlich nicht gefunden, ich hoffe, Sie können mich aufklären). Soweit ich weiß, handelt es sich dabei um das Generator-React-Webpack von Yeoman, die Create-React-App von React und ein gutes React-Starter-Kit (Hot Loading und integriert viel Code, auf den viel verwiesen wird).
Als ich React lernte, entdeckte ich, dass die ersten beiden oben erwähnten React-Gerüste eine Hot-Refresh statt Hot-Loading bieten.
Einfache Unterscheidung zwischen Hot Loading und Hot Refresh:
Hot Refresh: Nachdem die Datei geändert wurde, wird die gesamte Seite aktualisiert, ohne dass der Status (z. B. Eingabe von) erhalten bleibt Inhalt) Eingabeformular), das einem Webpack entspricht und Ihnen hilft, F5 zum Aktualisieren zu drücken
Hot Loading: Nachdem die Datei geändert wurde, wird der geänderte Bereich mit minimalen Kosten geändert. Behalten Sie den Status so weit wie möglich bei, bevor Sie die Datei ändern (ändern Sie nach Eingabe des Eingabeinhalts den Code anderer Tags).
Obwohl beide das Entwicklungserlebnis im Vergleich zur herkömmlichen Entwicklung (manuelles F5) verbessern, sind beide die Die Lücke ist immer noch riesig, insbesondere wenn das Projekt komplexer wird. Wir müssen dieses Problem ein für alle Mal lösen (um mehr Zeit für die Entwicklung von Fehlern zu lassen).
Praktische Modifikation
Die Konfiguration von Grund auf ist ein weiterer Bereich, daher beginnen wir, Änderungen direkt von vue-cli aus vorzunehmen.
In den folgenden Schritten werden nur die Schlüssel zur Inspiration aufgeführt. Weitere Informationen finden Sie im endgültigen Github-Komplettprojekt
Löschenvue-bezogen Abhängigkeiten, Dateien usw. ; Alles im scr kann gelöscht werden
package.json Abhängigkeit wird zum Babel-Loader Webpack-Dev-Server React-Hot-Loader hinzugefügt (das Wichtigste thing)
package.json Befehlszeileneinstellung „dev“: „webpack-dev-server --inline --progress --config build/webpack.dev.conf.js“
Webpack.base.conf Das Hinzufügen von .jsx-Dateien muss von babel-loader verarbeitet werden, Optionen konfigurieren: {plugins:['react-hot-loader/babel']}
. Fügen Sie babelrc-Voreinstellungen hinzu, um zu reagieren, und fügen Sie unten Plugins hinzu: ['react-hot-loader/babel']
Erstellen Sie main.js im src-Ordner (benennen Sie ihn gemäß der Webpack-Konfiguration Die Eintragsdatei ist konsistent)
import 'core-js/fn/object/assign'; import React from 'react'; import ReactDOM from 'react-dom'; import { hot } from 'react-hot-loader'; import App from './pages/App'; // 自己写吧 import './assets/css/reset.scss'; // Render the main component into the dom ReactDOM.render(<App/>, document.getElementById('app')); export default hot(module)(App); // 热加载的关键
An diesem Punkt können wir gerne React verwenden, um das Vergnügen von Hot zu erleben wird geladen~
Das Problem
Ändern Sie einfach die Datei main.js in vue-cli, um reaktionsbezogenen Code zu erhalten (vergessen Sie nicht, Babel so zu konfigurieren). jsx verarbeiten) und weiterhin Hot Refresh verwenden.
Nachdem ich den lokalen Code beobachtet und verglichen hatte, fand ich einen attraktiven Namen:
In der Datei webpack.dev.conf:
new webpack.HotModuleReplacementPlugin()
OnlineQuery Später erfuhr ich, dass dies der Schlüssel zum Hot-Loading ist. Dazu muss der Code selbst über die Eigenschaft Modularität verfügen (was bedeutet, dass jedes Framework, das wiederverwendbare Komponenten wie die drei Hauptframeworks schreiben kann, davon profitieren kann property ), so dass Hot-Loading durch Ein- und Ausstecken von Code erreicht werden kann.
Die jsx-Spezialeffekte von React können von HotModuleReplacementPlugin nicht verarbeitet werden und können nur im laufenden Betrieb aktualisiert werden.
In diesem Fall steht React-Hot-Loader kurz vor der Veröffentlichung. Gemäß der offiziellen Nutzungsmethode können Sie das Hot-Reloading weiterhin verwenden.
ps: Nur als Referenz, ich erkunde und lerne auch viele Reaktionscodes
Konfigurierte Projektadresse: gayhub
Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall gelesen haben In diesem Artikel Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Verpackung und Verwendung von Vue-Cli-Multimodulen
Knoten+Token implementiert Verifizierung
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Webpack Hot Refresh und Hot Loading. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!