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.
iframe-Modus ( die Seite wird in einem Iframe platziert und bei Änderungen neu geladen)
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:
Hinzufügen --inline-Befehl zur Befehlszeile
devServer:{inline:true}
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);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
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();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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
