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

Detaillierte Erläuterung des Webpack-Backend-Renderings

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

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: 'http://localhost:5000/static/'
})
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, 'assets/bundles/manifest.json'))
 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:

    extract-text-webpack-plugin kann nicht sein Hot-Reload nach dem Hinzufügen. Fügen Sie dieses Plug-in nicht während der Entwicklungskonfiguration hinzu.
  1. Laut der Webpack-Dokumentation muss jede Eintragsdatei den folgenden Code hinzufügen, um ein Hot-Reload von js zu erreichen


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