suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Verwendung von Webpack-Dev-Server (mit Code)

Detaillierte Erläuterung der Verwendung von Webpack-Dev-Server (mit Code)

php中世界最好的语言
php中世界最好的语言Original
2018-04-20 14:08:022729Durchsuche

Dieses Mal erkläre ich Ihnen ausführlich die Verwendung des Webpack-Dev-Servers (mit Code), welche Vorsichtsmaßnahmen bei der Verwendung des Webpack-Dev-Servers gelten, und das Folgende ist eine praktische Erklärung Fall, werfen wir einen Blick darauf.

webpack-dev-server

webpack-dev-server ist ein kleiner Node.js Express-Server, der zusätzlich webpack-dev-middleware verwendet, um Webpack-Pakete bereitzustellen Darüber hinaus verfügt es auch ü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"
}
}

Hier legen Sie Ihre Quelldateien im App-Ordner ab und packen sie über Webpack in bundle.js unter dem Build-Ordner.

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

Basisverzeichnis

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

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

Der obige Befehl wird in der Befehlszeile ausgeführt und verwendet das Build-Verzeichnis als Stammverzeichnis: webpack – Das von dev generierte Paket -server wird nicht in Ihrem echten Verzeichnis abgelegt, sondern im Speicher.

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

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

Automatische Aktualisierung

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

  1. iframe-Modus ( die Seite wird in einem Iframe platziert und bei Änderungen neu geladen)

  2. Inline-Modus (fügen Sie den Client-Eintrag von webpack-dev-sever zum Paket hinzu (im Bundle)

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
Die Verwendung dieses Modus ist nicht erforderlich Zusätzliche Konfiguration, 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 im Inline-Modus nicht ändern . Es gibt zwei Situationen, wenn dieser Modus aktiviert wird:

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

  1. Hinzufügen --inline-Befehl zur Befehlszeile

  2. devServer:{inline:true}

2 Beim Starten von Webpack -dev-server mit der Node.js-API müssen wir außerdem zwei Dinge tun:

  1. Aufgrund der Konfiguration von webpack-dev-server Es gibt keine Inline-Option, die wir hinzufügen müssen webpack-dev-server/client?http://«path»:«port»/ zum Einstiegspunkt der Webpack-Konfiguration

  2. wird Zur HTML-Datei hinzufügen 

 var config = require("./webpack.config.js");
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
 contentBase:'build/',
 publicPath: "/assets/"
});
server.listen(8080);
in 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

Führen Sie den Inline-Modus in der Befehlszeile aus und aktivieren Sie den Hot Module Replacement

Fügen Sie hier einfach mehr hinzu. Die - Der Befehl -hot ist in Ordnung. 

webpack-dev-server --content-base build --inline --hot
Hinweis: Im Befehlszeilenmodus muss „output.publicPath“ in webpack.config.js konfiguriert werden, um den Speicherort für den Zugriff auf das kompilierte Paket (Bundle) anzugeben.

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

Hier sind drei Dinge zu tun:

  1. Im Webpack zur Eintragsoption hinzufügen config.js: webpack/hot/dev-server

  2. Zur Plugins-Option von webpack.config.js hinzufügen: neues webpack.HotModuleReplacementPlugin()

  3. Fügen Sie in der Konfiguration von webpack-dev-server Folgendes hinzu: hot:true

Konfigurationsoption 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 'http://localhost:8080/' 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('/some/path', function(req, res) {
 // res.json({ custom: 'response' });
 // });
 },
 // 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's a required option.
 publicPath: "/assets/",
 headers: { "X-Custom-Header": "yes" },
 stats: { colors: true }
});
server.listen(8080, "localhost", function() {});
// server.close();
Ich glaube, das haben Sie Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Vue-Projektpaketierungsschritte nach Umgebung

Vermeiden Sie Dom-Missverständnisse bei der Verwendung von Angular2

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Webpack-Dev-Server (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php node.js html npm webpack express JS dom http
Stellungnahme：
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
Vorheriger Artikel：Detaillierte Erläuterung der Schritte zum Packen von Vue-Projekten nach UmgebungNächster Artikel：Detaillierte Erläuterung der Schritte zum Packen von Vue-Projekten nach Umgebung

In Verbindung stehende Artikel

Mehr sehen