So verwenden Sie Hot Refresh und Hot Loading im Webpack richtig

Dieses Mal zeige ich Ihnen, wie Sie Hot Refresh und Hot Loading im Webpack richtig verwenden . .

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 glücklich 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

1. Löschen

   vue-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
6. 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()

Online

Query

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 erforsche und lerne immer noch viele Reaktionscodes

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Themen im Artikel zur chinesischen PHP-Website!

Empfohlene Lektüre:

So gehen Sie mit großen, von Webpack gepackten Dateien um

So installieren Sie npm in vue.js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Hot Refresh und Hot Loading im Webpack richtig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!