Detaillierte Erläuterung der einfachen Verwendung der Webpack-Dev-Server_Javascript-Fähigkeiten-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Detaillierte Erläuterung der einfachen Verwendung der Webpack-Dev-Server_Javascript-Fähigkeiten

不言

Apr 03, 2018 am 09:36 AM

javascript web

Dieser Artikel stellt hauptsächlich die einfache Verwendung des Webpack-Dev-Servers im Detail vor. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz. Folgen wir dem Editor, um einen Blick darauf zu werfen

webpack-dev-server

webpack-dev-server ist ein kleiner Node.js Express-Server -dev-middleware zur Bereitstellung von Webpack-Paketen. Darüber hinaus verfügt es über eine Mikrolaufzeit, die über Sock.js eine Verbindung zum Server herstellt.

Werfen wir einen Blick auf die folgende Konfigurationsdatei ( webpack.config.js).

var path = require("path");
module.exports = {
 entry:{
 app:["./app/main.js"]
 },
 output:{
 path:path.resolve(__dirname,"build"),
 publicPath:"/assets/",
 filename:"bundle.js"
}
}

Nach dem Login kopieren

Hier legen Sie Ihre Quelldatei im App-Ordner ab und packen sie über webpack bundle.js im Ordner in die Build-Datei.

Hinweis: webpack-dev-server ist ein unabhängiges NPM-Paket. Sie können es über npm install webpack-dev-server installieren.

Basisverzeichnis

webpack-dev-server verwendet standardmäßig das aktuelle Verzeichnis als Basisverzeichnis, sofern Sie es nicht angeben.

webpack-dev-server --content-base build/

Nach dem Login kopieren

Der obige Befehl wird ausgeführt in der Befehlszeile, die das Build-Verzeichnis als Stammverzeichnis verwendet. Beachten Sie, dass das von webpack-dev-server generierte Paket nicht in Ihrem tatsächlichen Verzeichnis, sondern im Speicher abgelegt wird.

Wir erstellen eine neue index.html-Datei im Basisverzeichnis und geben dann http://localhost:8080 in den Browser ein, um darauf zuzugreifen.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="assets/bundle.js"></script>
</body>
</html>

Nach dem Login kopieren

Automatische Aktualisierung

webpack-dev-server unterstützt zwei Modi zum automatischen Aktualisieren der Seite.

Iframe-Modus (die Seite ist in einem Iframe platziert und neu geladen, wenn Änderungen auftreten)
Inline-Modus (fügen Sie den Client-Eintrag von webpack-dev-sever zum Bundle hinzu) Mittel)

Beide Modi unterstützen den Hot-Modul-Austausch. Der Vorteil des Hot-Modul-Austauschs besteht darin, dass nur der aktualisierte Teil ersetzt wird, anstatt die Seite neu zu laden.

Iframe-Modus
Für die Verwendung dieses Modus ist keine zusätzliche Konfiguration erforderlich. Sie müssen nur im folgenden URL-Format darauf zugreifen

http://«host»:«port»/webpack-dev- server/«path»

Zum Beispiel: http://localhost:8080/webpack-dev-server/index.html.

Inline-Modus

Die URL, auf die wir zugreifen, muss sich nicht ändern Im Inline-Modus gibt es zwei Situationen, wenn dieser Modus aktiviert wird:

1 Beim Starten von webpack-dev-server über die Befehlszeile müssen zwei Dinge getan werden:

Fügen Sie den Befehl --inline zur Befehlszeile hinzu
Fügen Sie devServer:{inline:true}< zu webpack.config.js hinzu 🎜>

2 Wenn wir webpack-dev-server mit der Node.js-API starten, müssen wir außerdem zwei Dinge tun:

Aufgrund von webpack-dev- gibt es in der Serverkonfiguration keine Inline-Option Sie müssen webpack-dev-server/client?http://«path»:«port»/ zum Einstiegspunkt der Webpack-Konfiguration hinzufügen.
zur HTML-Datei

 var config = require("./webpack.config.js");
 var webpack = require(&#39;webpack&#39;);
 var WebpackDevServer = require(&#39;webpack-dev-server&#39;);

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
 contentBase:&#39;build/&#39;,
 publicPath: "/assets/"
});
server.listen(8080);

Nach dem Login kopieren

Führen Sie einfach den obigen Code in Node aus.

Hinweis: Das devSever-Konfigurationselement in der Webpack-Konfiguration ist nur im Befehlszeilenmodus gültig.

(Hot Module Replacement) Hot Module Replacement

Inline-Modus in der Befehlszeile ausführen und Hot Module Replacement aktivieren

Sie müssen hier nur weitere --hot-Anweisungen hinzufügen.

webpack-dev-server --content-base build --inline --hot

Nach dem Login kopieren

Hinweis: Im Befehlszeilenmodus. publicPath muss in js konfiguriert werden, um den Zugriffsort des kompilierten Bundles anzugeben.

Führen Sie den Inline-Modus in der Nodejs-API aus und aktivieren Sie den Hot-Modul-Ersatz

Hier müssen Sie Folgendes tun drei Dinge:

In der Eintragsoption von webpack.config.js hinzufügen: webpack/hot/dev-server

Zu den Plugins hinzufügen Option von webpack.config.js: new webpack.HotModuleReplacementPlugin()
Zur Konfiguration von webpack-dev-server hinzufügen: hot:true
Konfigurationsoptionen im Webpack-Dev-Server

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");

var compiler = webpack({
 // configuration
});
var server = new WebpackDevServer(compiler, {
 // webpack-dev-server options

 contentBase: "/path/to/directory",
 // Can also be an array, or: contentBase: "http://localhost/",

 hot: true,
 // Enable special support for Hot Module Replacement
 // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
 // Use "webpack/hot/dev-server" as additional module in your entry point
 // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does. 

 // Set this as true if you want to access dev server from arbitrary url.
 // This is handy if you are using a html5 router.
 historyApiFallback: false,

 // Set this if you want to enable gzip compression for assets
 compress: true,

 // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
 // Use "**" to proxy all paths to the specified server.
 // This is useful if you want to get rid of &#39;http://localhost:8080/&#39; in script[src],
 // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
 proxy: {
 "**": "http://localhost:9090"
 },

 setup: function(app) {
 // Here you can access the Express app object and add your own custom middleware to it.
 // For example, to define custom handlers for some paths:
 // app.get(&#39;/some/path&#39;, function(req, res) {
 // res.json({ custom: &#39;response&#39; });
 // });
 },

 // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
 staticOptions: {
 },

 // webpack-dev-middleware options
 quiet: false,
 noInfo: false,
 lazy: true,
 filename: "bundle.js",
 watchOptions: {
 aggregateTimeout: 300,
 poll: 1000
 },
 // It&#39;s a required option.
 publicPath: "/assets/",
 headers: { "X-Custom-Header": "yes" },
 stats: { colors: true }
});
server.listen(8080, "localhost", function() {});
// server.close();

Nach dem Login kopieren

Referenz: http://webpack.github.io/ docs/webpack- dev-server.html

Verwandte Empfehlungen:

So stellen Sie den Remote-Modus für Webpack-Dev-Server ein

Detaillierte Erläuterung des Webpack-Dev-Servers, der http-Proxy verwendet, um domänenübergreifende Probleme zu lösen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der einfachen Verwendung der Webpack-Dev-Server_Javascript-Fähigkeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7464

CakePHP-Tutorial

1376

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

So aktivieren Sie den administrativen Zugriff über die Cockpit-Web-Benutzeroberfläche Mar 20, 2024 pm 06:56 PM

Cockpit ist eine webbasierte grafische Oberfläche für Linux-Server. Es soll vor allem neuen/erfahrenen Benutzern die Verwaltung von Linux-Servern erleichtern. In diesem Artikel besprechen wir die Cockpit-Zugriffsmodi und wie Sie den Administratorzugriff von CockpitWebUI auf das Cockpit umstellen. Inhaltsthemen: Cockpit-Eingabemodi Ermitteln des aktuellen Cockpit-Zugriffsmodus Aktivieren des Verwaltungszugriffs für das Cockpit über CockpitWebUI Deaktivieren des Verwaltungszugriffs für das Cockpit über CockpitWebUI Fazit Cockpit-Eingabemodi Das Cockpit verfügt über zwei Zugriffsmodi: Eingeschränkter Zugriff: Dies ist die Standardeinstellung für den Cockpit-Zugriffsmodus. In diesem Zugriffsmodus können Sie vom Cockpit aus nicht auf den Webbenutzer zugreifen

Ist PHP Front-End oder Back-End in der Webentwicklung? Mar 24, 2024 pm 02:18 PM

PHP gehört zum Backend in der Webentwicklung. PHP ist eine serverseitige Skriptsprache, die hauptsächlich zur Verarbeitung serverseitiger Logik und zur Generierung dynamischer Webinhalte verwendet wird. Im Vergleich zur Front-End-Technologie wird PHP eher für Back-End-Vorgänge wie die Interaktion mit Datenbanken, die Verarbeitung von Benutzeranfragen und die Generierung von Seiteninhalten verwendet. Anschließend wird anhand konkreter Codebeispiele die Anwendung von PHP in der Backend-Entwicklung veranschaulicht. Schauen wir uns zunächst ein einfaches PHP-Codebeispiel zum Herstellen einer Verbindung zu einer Datenbank und zum Abfragen von Daten an:

See all articles