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