Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Webpack-Backend-Renderings

Detaillierte Erläuterung des Webpack-Backend-Renderings

小云云Original: 2018-01-20 13:57:511832Durchsuche

In diesem Artikel wird hauptsächlich die detaillierte Erklärung des Back-End-Renderings nach der Webpack-Konfiguration vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Back-End-Rendering der Webpack-Konfiguration Im Jahr 2017 haben Vue, React und Angular den Mainstream des Front-Ends besetzt, und ich muss zugeben, dass dies auch die zukünftige Entwicklungsrichtung des Front-Ends ist Die Back-End-Entwicklungsmethode ist jedoch immer noch weit verbreitet. Unabhängig davon, ob es sich um ein persönliches Projekt oder ein kommerzielles Projekt handelt, ist das Back-End-Rendering sehr grob und schnell. Auch beim End-Rendering gibt es viel Raum für Verbesserungen. Hier werde ich meine eigenen praktischen Erfahrungen vorstellen: Front-End und Back-End sind nicht getrennt. Realisieren Sie Hot Loading und Front-End-gesteuerte Entwicklung bis zu einem gewissen Grad Ein Beispiel, aber es gibt auch eine Django-Version im Lager, die in allen Sprachen implementiert werden kann. Wenn Sie interessiert sind, können Sie sich die Lageradresse am Ende des Artikels ansehen

Rendering

Prinzip

Das Prinzip ist ganz einfach:

1. Unabhängig Starten Sie den statischen Ressourcenserver zum Packen und Generieren der Ressourcenliste (Manifest)

Generieren Sie die Datei manifest.json über das Webpack-Manifest-Plugin-Plug-In

new ManifestPlugin({
  writeToFileEmit: true,
  publicPath: &#39;http://localhost:5000/static/&#39;
})

Das Dateiergebnis ist wie in der Abbildung dargestellt:

Der Server liest die Ressourcenliste und lädt sie in die Vorlagendatei

app.use(async (ctx, next) => {
 const manifest = await fs.readFile(path.resolve(__dirname, &#39;assets/bundles/manifest.json&#39;))
 ctx.state = {
  static: JSON.parse(manifest.toString())
 }
 await next()
})

Diese Middleware mountet die Ressourcenliste in ctx.state (Vorlagenvariable), indem sie manifest.json liest, und dann können Sie direkt auf die statische Ressourcenvariable in der Vorlage verweisen

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>{{ title }}</title>
 <link rel="stylesheet" href="{{static[&#39;test.css&#39;]}}" rel="external nofollow" >
</head>
<body>
 <h1>Hello, World</h1>
 
 <script src="{{static[&#39;test.js&#39;]}}"></script>
</body>
</html>

Da beim Back-End-Rendering im Allgemeinen mehrere Einträge verwendet werden, müssen Sie nur die erforderlichen Eintragsdateien in die entsprechende Vorlage einfügen.

Hot Loading

Tatsächlich gibt es viele Lösungen für Hot Loading: Browsersync, Live Reload usw., aber es handelt sich dabei um vollständige Reloads, die nur die Häufigkeit reduzieren von f5. Das Hot-Loading von Webpack ist über WebSocket viel bequemer (insbesondere ich nicht sicher) und es ist sehr einfach zu konfigurieren

Zum Plug-in hinzufügen:

hot: &#39;webpack/hot/only-dev-server&#39;,
devServerClient: &#39;webpack-dev-server/client?http://0.0.0.0:5000&#39;

/**
完整版
entry: {
  index: &#39;./assets/index.js&#39;,
  test: &#39;./assets/test.js&#39;,
  hot: &#39;webpack/hot/only-dev-server&#39;,
  devServerClient: &#39;webpack-dev-server/client?http://0.0.0.0:5000&#39;
},
*/

new webpack.HotModuleReplacementPlugin()Es sind zwei Punkte zu beachten:

Die vollständige Konfiguration und der Code werden hier nicht veröffentlicht. Die Lageradresse (ein Teil des Django-Codes befindet sich in der Hauptniederlassung): https://github.com/xiadd/wepack-mutipage

if (module.hot) {
 module.hot.accept()
}

Verwandte Empfehlungen:

Reagieren Sie auf Front-End- und Back-End-Isomorphismus, um wiederholtes Rendern zu verhindern

Nuxts serverseitige Vue.js-Rendering-Praxis

Erläuterung des vue.js-Rendering- und Schleifenwissens

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Webpack-Backend-Renderings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erklärung von Typ und Typbeurteilung in JavascriptNächster Artikel：Detaillierte Erklärung von Typ und Typbeurteilung in Javascript

In Verbindung stehende Artikel

Mehr sehen