Detaillierte Erläuterung des Webpack-Backend-Renderings-js-Tutorial-php.cn

Detaillierte Erläuterung des Webpack-Backend-Renderings

小云云

Freigeben： 2018-01-20 13:57:51

Original

1887 Leute haben es durchsucht

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;
})

Nach dem Login kopieren

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()
})

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
},
*/

Nach dem Login kopieren

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()
}

Nach dem Login kopieren

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!