Eingehende Analyse der devServer-Konfiguration, um Kompilierungsprobleme in Echtzeit zu lösen

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, das hauptsächlich die Probleme im Zusammenhang mit der Echtzeitkompilierung von Webpack-Dev-Server vorstellt. Schauen wir uns das gemeinsam an. hoffe es hilft allen.

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Jedes Mal, wenn Sie den Code ändern, müssen Sie ihn neu packen, den Browser öffnen und aktualisieren, was sehr mühsam ist

Wir können webpackdevserver installieren und verwenden. Verbessern Sie diese Erfahrung

webpack-dev-server startet hauptsächlich einen HTTP-Server mit Express. Seine Hauptfunktion besteht darin, Ressourcendateien bereitzustellen. Darüber hinaus verwenden dieser HTTP-Server und -Client das WebSocket-Kommunikationsprotokoll. Nachdem die Originaldatei geändert wurde, kompiliert der Webpack-Dev-Server sie in Echtzeit, die endgültige kompilierte Datei wird jedoch nicht in den Zielordner ausgegeben, der das Original ist Konfiguration in unserer Ausgabe unten: Der dist-Ordner wird nach dem Packen generiert, aber das dist-Verzeichnis wird nicht mit dev-server generiert

output: {
        path: './dist/js',
        filename: 'bundle.js'
    }

Nach dem Starten des Dienstes werden Sie feststellen, dass das dist-Verzeichnis nicht mehr vorhanden ist Legen Sie die gepackten Module stattdessen in den Speicher, um die Geschwindigkeit zu erhöhen: npm install webpack-dev-server -D

Paket.json ändern:

Dann können Sie npm ausführen Führen Sie den Server in Zukunft aus. Starten Sie unseren Dienst.

Konfigurieren Sie in webpack.config.js:

Domänenübergreifend: Beim gemeinsamen Debuggen werden Front-End und Back-End getrennt, und der direkte Datenabruf erfolgt domänenübergreifend . Nachdem wir online gegangen sind, können wir es mit Nginx weiterleiten.

Anwendungsszenario: Wenn wir auf diese Schnittstellen zugreifen, treten domänenübergreifende Probleme auf. Früher haben wir den Antwortheader in server.js festgelegt, um domänenübergreifendes Arbeiten zu ermöglichen. Jetzt können Sie aber auch den devServer-Proxy verwenden.

1. Bereiten Sie den Knotendienst vor und erstellen Sie server.js im Projektstammverzeichnis:

2. Konfigurieren Sie devServer in der Datei webpack.config:

?? Replacement (HMR: Hot Module Replacement) ist ein Modul, das mit dem Webpack geliefert wird und keine zusätzliche Installation erfordert. Konfigurieren Sie hmr:

1) Fügen Sie das Webpack in den Header der Konfigurationsdatei webpack.config.js ein

const webpack = require("webpack");

2) Fügen Sie es hinzu Plug-in-Konfiguration:

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

3) Starten Sie hmr

Die obige Konfiguration funktioniert nicht für js Hot Update. Die Seite wird beim Speichern trotzdem aktualisiert, um den Update-Effekt zu erzielen:

Wir haben zwei b.js und a.js-Dateienb geben 1 in .js zurück

a.js führt b.js ein und schreibt das Ausführungsergebnis der Daten b + eine Zahl auf die Seite

Im Eintragsdateiindex .js, führe einen ein, führe den NPM-Run-Server aus (unsere Hot-Update-Konfiguration bleibt unverändert)

Dann öffnen wir die Seite, ändern den Wert von b() + 1000 in a.js, dann Strg+S zum Speichern, und stellen Sie fest, dass die Seite aktualisiert wird, um den Wert zu aktualisieren. Dies ist offensichtlich nicht das, was wir sehen möchten. Bei Hot-Updates von js müssen wir die auszuführende Datei in der Eintragsdatei überwachen:

Speichern Sie nach dem Ändern des Werts in a.js, ohne die Seite zu aktualisieren. Der Wert wird ebenfalls angezeigt. Der zuletzt berechnete Wert wird auf der Seite angezeigt

Zusammenfassung: HMR unterstützt standardmäßig CSS-Hot-Updates, erfordert jedoch eine separate Überwachung für js

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Das obige ist der detaillierte Inhalt vonEingehende Analyse der devServer-Konfiguration, um Kompilierungsprobleme in Echtzeit zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!