Detaillierte Erläuterung der Schritte zur Verwendung des Dev-Servers im Webpack

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Dev-Server im Webpack ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Dev-Server im Webpack? .

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, das Sie installieren können es über npm install webpack-dev-server

Basisverzeichnis

webpack-dev-server wird standardmäßig installiert Verwenden Sie das aktuelle Verzeichnis als Basisverzeichnis, sofern nicht Sie geben es an.

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

Der obige Befehl wird in der Befehlszeile ausgeführt, wobei das Build-Verzeichnis als Stammverzeichnis verwendet wird: webpack-dev-server generiert Das Paket wird nicht abgelegt Ihr echtes Verzeichnis, aber im Speicher.

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

nbsp;html>


 <meta>
 <title>Document</title>


 <script></script>

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 neu geladen, wenn Änderungen auftreten)

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

Beide Modi werden unterstützt Der Vorteil des Hot-Modulaustauschs 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 darauf zugreifen im folgenden URL-Format

http://«host»:«port»/webpack-dev-server/« path»

Zum Beispiel: http://localhost:8080/webpack -dev-server/index.html.

Inline-Modus

Inline-Modus Die von uns besuchte URL muss nicht geändert werden. 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. Fügen Sie den Befehl --inline zur Befehlszeile hinzu

2. devServer:{inline:true} zu webpack.config.js hinzufügen

2 Wenn Sie webpack-dev-server mit der Node.js-API starten, Wir müssen außerdem zwei Dinge tun:

1. Da es in der Konfiguration von webpack-dev-server keine Inline-Option gibt, müssen wir webpack-dev-server/client?http hinzufügen ://«Pfad»:«Port»/ zum Einstiegspunkt der Webpack-Konfiguration.

2. Ändern Sie 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);

Führen Sie 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 Zugriffsort des kompilierten Pakets (Bundles) anzugeben.

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

Sie müssen hier die folgenden drei Dinge tun:

1. In webpack.config hinzufügen zur Eingabeoption von js: webpack/hot/dev-server

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

3. In der Konfiguration des Webpack-Dev-Servers 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();

Glauben Sie es oder 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 Verwendung der Vuex-Methode in React

Anleitung zur Verwendung der in Vue integrierten Anweisungen

So können Sie den Seitencode bei Bedarf aufteilen und laden

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung des Dev-Servers im Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!