Dieses Mal werde ich Ihnen die Verwendung der automatischen Aktualisierung und Analyse von Webpacks vorstellen. Was sind die Vorsichtsma?nahmen für die Verwendung der automatischen Aktualisierung und Analyse von Webpacks?

Das Front-End muss h?ufig js und Stile ?ndern und st?ndig an den Seiteneffekt des Browsers angepasst werden. Oft stimmen unser Entwicklungsverzeichnis und das lokale Release-Verzeichnis nicht überein Ver?ffentlichen Sie sie nach der ?nderung. Das hei?t, nicht alle Auswirkungen k?nnen direkt durch Doppelklicken auf die Seite angezeigt werden. Wir müssen h?ufig Nginx verwenden, um eine Site lokal zu beobachten (es ist in Ordnung, bevor wir sie auf unserem eigenen Computer einfügen). Testumgebung). Wenn Sie also den Browser manuell aktualisieren und die Site manuell ver?ffentlichen (oder anklicken) und starten müssen, ist das in der Tat eine Menge k?rperlicher Arbeit. Und diese drei Webpack-Punkte k?nnen uns dabei helfen.

webpack-dev-server

Webpack implementiert die automatische Aktualisierung über den webpack-dev-server (WDS). WDS ist ein Entwicklungsserver (ein Express), der im Speicher ausgeführt wird. Nach dem Start erkennt es, ob sich die Datei ge?ndert hat und kompiliert automatisch erneut.

1. Installation

npm?install?webpack-dev-server?--save-dev

Installieren Sie es zun?chst über npm im Entwicklungsverzeichnis. Nach Abschluss der Installation finden Sie es unter node_modules/bin.

2. Starten Sie npm

?ndern Sie dann package.json: (basierend auf dem vorherigen Abschnitt)

?"scripts":?{????"start":?"webpack-dev-server?--env?development",????"build":?"webpack?--env?production"
??}

Jetzt k?nnen Sie es über npm run start oder npm start starten .

Nach dem Start k?nnen Sie sehen, dass das Projekt unter http://localhost:8080 ausgeführt wird. Das ?ffnen der Seite

zeigt, dass WDS automatisch eine Site für uns erstellt hat. Wir ?ndern Component.js, die Kompilierung wird in cmd angezeigt und die Seite wird automatisch aktualisiert.

3. Direkt starten

Offizielle Website-Einführung: Sie k?nnen WDS direkt über den folgenden Befehl starten.

webpack-dev-server?--env?development

Aber es wird eine Meldung angezeigt, dass webpack-dev-server --env development kein interner Befehl ist. Diese Art von Problem wird durch Umgebungsvariablen verursacht. Legen Sie einfach das von Ihnen entwickelte bin-Verzeichnis fest Umgebungsvariable, zum Beispiel ist mein Verzeichnis ?E:Html5node_modules.bin“, fügen Sie einfach ein Semikolon hinzu und schreiben Sie es am Ende.

C:\Users\Administrator.9BBOFZPACSCXLG2\AppData\Roaming\npm;C:\Program?Files?(x86)\Microsoft?VS?Code\bin;E:\Html5\node_modules\.bin

4.8080-Port belegt

Wenn der Standard-8080-Port belegt ist, ?ndert WDS ihn. Verwenden Sie beispielsweise Nginx, um zuerst eines zu ver?ffentlichen.

???server{
??????listen???????8080;
??????location?/?{
???????????root???E:/Html5/build;
???????????index??index.html?index.htm;
????????}
????}

WDS neu starten:

Der Port wird auf 8081 umgestellt. Sie k?nnen den Port auch manuell konfigurieren:

?devServer:{???//...
????port:?9000}

nodemon startet automatisch

WDS überwacht Entwicklungsdateien und ?nderungen an webpack.config.js führen nicht zu einem automatischen Start. Dazu ben?tigen wir Nodemon.

npm?install?nodemon?--save-dev

Installieren Sie es zuerst im Entwicklungsverzeichnis und ?ndern Sie dann package.json:

?"scripts":?{???"start":?"nodemon?--watch?webpack.config.js?--exec?\"webpack-dev-server?--env?development\"",????"build":?"webpack?--env?production"
??},

Dies entspricht dem überwachen von webpack.config.js durch Nodemon und dem Starten, wenn dies der Fall ist ?nderungen.

Auf diese Weise k?nnen Sie Ihre H?nde auf die Entwicklung konzentrieren.

Proxy

Aber ich habe ein wenig Zweifel an der Ersetzbarkeit der WDS-Site, da der Nginx, den wir selbst bereitgestellt haben, über einige API-Proxys verfügt. Wenn es auf der Standardsite von WDS h?ngt, ist es natürlich nicht zug?nglich. Mit anderen Worten: K?nnen Sie einen Aktualisierungspfad für WDS konfigurieren? Wenn sich die Datei ?ndert, aktualisieren Sie die angegebene Adresse oder bitten Sie mich, einen Proxy zu konfigurieren. Da es sich selbst um einen http-Server handelt, muss er auch über Proxy-Funktionen verfügen. Nach der Suche habe ich Folgendes gefunden: https://github.com/webpack/webpack-dev-server/tree/master/examples/proxy-advanced

module.exports?=?{
????context:?dirname,
????entry:?"./app.js",
????devServer:?{????????proxy:?{????????????"/api":?{
????????????????target:?"http://jsonplaceholder.typicode.com/",
????????????????changeOrigin:?true,
????????????????pathRewrite:?{????????????????????"^/api":?""
????????????????},
????????????????bypass:?function(req)?{????????????????????if(req.url?===?"/api/nope")?{????????????????????????return?"/bypass.html";
????????????????????}
????????????????}
????????????}
????????}
????}
}

über das API-Feld Ersetzen Sie es durch http://jsonplaceholder.typicode.com/ und l?schen Sie es aus der ursprünglichen Adresse, damit Sie den Proxy selbst implementieren k?nnen. Alle sind glücklich! WDS implementiert Proxy über http-proxy-middleware. Weitere Referenzen: http://webpack.github.io/docs/webpack-dev-server.html#bypass-the-proxy;https://github.com/chimurai/http-proxy-middleware#options

but，這種刷新是怎么實(shí)現(xiàn)的呢？因?yàn)轫撁嫔蠜]有嵌入什么別的js，去翻原碼 web-dev-server/server.js中有這么一段：

Server.prototype._watch?=?function(path)?{????const?watcher?=?chokidar.watch(path).on("change",?function()?{????????this.sockWrite(this.sockets,?"content-changed");
????}.bind(this))????this.contentBaseWatchers.push(watcher);
}

用chokidar來監(jiān)視文件變化,server的內(nèi)部維護(hù)的有一個(gè)socket集合：

Server.prototype.sockWrite?=?function(sockets,?type,?data)?{
????sockets.forEach(function(sock)?{
????????sock.write(JSON.stringify({
????????????type:?type,
????????????data:?data
????????}));
????});
}

sock是一個(gè)sockjs對象。https://github.com/sockjs/sockjs-client，從http://localhost:8080/webpack-dev-server/頁面來看，sockjs是用來通信記錄日志的。 ?

var?onSocketMsg?=?{
????hot:?function()?{
????????hot?=?true;
????????log("info",?"[WDS]?Hot?Module?Replacement?enabled.");
????},
????invalid:?function()?{
????????log("info",?"[WDS]?App?updated.?Recompiling...");
????????sendMsg("Invalid");
????},
????hash:?function(hash)?{
????????currentHash?=?hash;
????},
...
}

我們在看app.js,其中有一個(gè)OnSocketMsg 對象。

var?onSocketMsg?=?{
????hot:?function()?{
????????hot?=?true;
????????log("info",?"[WDS]?Hot?Module?Replacement?enabled.");
????},
????invalid:?function()?{
????????log("info",?"[WDS]?App?updated.?Recompiling...");
????????sendMsg("Invalid");
????},
????hash:?function(hash)?{
????????currentHash?=?hash;
????},????"still-ok":?function()?{
????????log("info",?"[WDS]?Nothing?changed.")????????if(useWarningOverlay?||?useErrorOverlay)?overlay.clear();
????????sendMsg("StillOk");
????},????"log-level":?function(level)?{
????????logLevel?=?level;
????},????"overlay":?function(overlay)?{????????if(typeof?document?!==?"undefined")?{????????????if(typeof(overlay)?===?"boolean")?{
????????????????useWarningOverlay?=?overlay;
????????????????useErrorOverlay?=?overlay;
????????????}?else?if(overlay)?{
????????????????useWarningOverlay?=?overlay.warnings;
????????????????useErrorOverlay?=?overlay.errors;
????????????}
????????}
????},
????ok:?function()?{
????????sendMsg("Ok");????????if(useWarningOverlay?||?useErrorOverlay)?overlay.clear();????????if(initial)?return?initial?=?false;
????????reloadApp();
????},????"content-changed":?function()?{
????????log("info",?"[WDS]?Content?base?changed.?Reloading...")
????????self.location.reload();
????},
????warnings:?function(warnings)?{
????????log("info",?"[WDS]?Warnings?while?compiling.");????????var?strippedWarnings?=?warnings.map(function(warning)?{????????????return?stripAnsi(warning);
????????});
????????sendMsg("Warnings",?strippedWarnings);????????for(var?i?=?0;?i?<?strippedWarnings.length;?i++)
????????????console.warn(strippedWarnings[i]);????????if(useWarningOverlay)?overlay.showMessage(warnings);????????if(initial)?return?initial?=?false;
????????reloadApp();
????},
????errors:?function(errors)?{
????????log("info",?"[WDS]?Errors?while?compiling.?Reload?prevented.");????????var?strippedErrors?=?errors.map(function(error)?{????????????return?stripAnsi(error);
????????});
????????sendMsg("Errors",?strippedErrors);????????for(var?i?=?0;?i?<?strippedErrors.length;?i++)
????????????console.error(strippedErrors[i]);????????if(useErrorOverlay)?overlay.showMessage(errors);
????},
????close:?function()?{
????????log("error",?"[WDS]?Disconnected!");
????????sendMsg("Close");
????}
};

View Code

ok的時(shí)候觸發(fā)一個(gè)reloadApp

function?reloadApp()?{????if(hot)?{
????????log("info",?"[WDS]?App?hot?update...");????????var?hotEmitter?=?webpack_require("./node_modules/webpack/hot/emitter.js");
????????hotEmitter.emit("webpackHotUpdate",?currentHash);????????if(typeof?self?!==?"undefined")?{????????????//?broadcast?update?to?window
????????????self.postMessage("webpackHotUpdate"?+?currentHash,?"*");
????????}
????}?else?{
????????log("info",?"[WDS]?App?updated.?Reloading...");????????self.location.reload();
????}
}

也就是說WDS先檢測文件是否變化，然后通過sockjs通知到客戶端，這樣就實(shí)現(xiàn)了刷新。之前WebSocket的第三方只用過socket.io,看起來sockjs也蠻好用的。不必外帶一個(gè)js，在主js里面就可以寫了。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

H5的緩存Manifest的使用

webpack的模塊熱替換詳解

webpack的樣式加載詳解

JS事件先發(fā)布后訂閱的方法

Das obige ist der detaillierte Inhalt vonDie Verwendung der automatischen Aktualisierung und Analyse von Webpacks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!