Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der einfachen Verwendung der Webpack-Dev-Server_Javascript-Fähigkeiten

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

不言Original: 2018-04-03 09:36:421131Durchsuche

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"
}
}

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/

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>

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}

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.
5826d60388e330b9cdbdd2d4c1bc13f22cacc6d41bbb37262a98f745aa00fbf0 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);

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

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();

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!

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：So vermeiden Sie Dom-Missverständnisse im fortgeschrittenen Angular2Nächster Artikel：So vermeiden Sie Dom-Missverständnisse im fortgeschrittenen Angular2

In Verbindung stehende Artikel

Mehr sehen