Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Verwendung von Webpack+Dev+Server
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 --hotHinweis: 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-ErsatzSie müssen hier die folgenden drei Dinge tun:
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:
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!