Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von Webpack + Dev + Server geben. Was sind die Vorsichtsmaßnahmen für die detaillierte Erklärung der Verwendung von Webpack + Dev + Server? Das Folgende ist ein praktischer Fall sehen.
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 sie über Webpack in bundle.js unter dem Build-Ordner.
Hinweis: Webpack-Dev-Server ist ein unabhängiges NPM-Paket. Sie können es über npm install webpack installieren. dev-server.
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 in der Befehlszeile ausgeführt, wodurch das Build-Verzeichnis als Stammverzeichnis verwendet wird. Beachten Sie Folgendes: Das von webpack-dev-server generierte Paket wird nicht in Ihrem tatsächlichen Verzeichnis abgelegt im Speicher abgelegt.
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 wird im Iframe platziert, neu laden, wenn Änderungen auftreten)
Inline-Modus (fügen Sie den Client-Eintrag von webpack-dev-sever zum Bundle hinzu)
Beide Modi unterstützen Hot Module Replacement Der Vorteil des Hot-Modulaustauschs besteht darin, dass nur der aktualisierte Teil ersetzt wird, anstatt die Seite neu zu laden.
iframe-Modus
Dieser Modus erfordert keine zusätzliche Konfiguration, Sie müssen nur im Folgenden darauf zugreifen URL-Format
http://«host»:«port»/webpack-dev-server/«path»
Zum Beispiel: http://localhost:8080/webpack-dev- server/index.html.
Inline-Modus
Die URL, auf die wir im Inline-Modus zugreifen, wird nicht verwendet. Es gibt zwei Situationen, in denen dieser Modus aktiviert ist:
1 Wenn Sie webpack-dev-server über die Befehlszeile starten, müssen Sie zwei Dinge tun:
Fügen Sie im Befehl den Befehl --inline in der Zeile
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);(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();D3.js zum Erstellen einer zirkulären Speicherzuordnung
Verwenden Sie AngularJS, um Anwendungen von Grund auf zu implementieren Modular
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Webpack+Dev+Server. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ist es schwierig, Java selbst zu lernen?
Ist die Geschwindigkeit von PHP8.0 verbessert?
Lohnt es sich, FIL langfristig zu halten?
Aus welchen Komponenten besteht ein Linux-System?
Einführung in Screenshot-Tastenkombinationen in Win8
So stellen Sie die IP ein
Datenanalysemethoden
So beheben Sie den HTTP-Request-415-Fehler
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
