Explication détaillée du rendu backend du webpack-js tutoriel-php.cn

Explication détaillée du rendu backend du webpack

小云云

Libérer： 2018-01-20 13:57:51

original

1846 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée du rendu back-end après la configuration du webpack. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Rendu back-end de configuration Webpack En 2017, vue, React et Angular ont occupé le courant dominant du front-end, et je dois admettre que c'est aussi l'orientation future du développement du front -end Cependant, la méthode de développement du rendu back-end est encore très courante. Qu'il s'agisse d'un projet personnel ou d'un projet commercial, le rendu back-end est vraiment approximatif et rapide. Mais avec le développement du front-end, back-end. Le rendu final a également beaucoup de place à l'amélioration.Ici, je vais présenter ma propre expérience pratique : Le front-end et le back-end ne sont pas séparés. Réaliser le chargement à chaud et le développement front-end dans une certaine mesure. Ici, nous prenons koa comme. un exemple, mais il y a aussi une version django dans l'entrepôt. En théorie, il peut être implémenté dans toutes les langues. Si vous êtes intéressé, vous pouvez y jeter un oeil, l'adresse de l'entrepôt est à la fin de l'article.

Rendu

Principe

Le principe est très simple :

1. Indépendamment démarrez le serveur de ressources statiques pour empaqueter et générer la liste de ressources (manifeste)

Générez le fichier manifest.json via le plug-in webpack-manifest-plugin

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

Copier après la connexion

Le résultat du fichier est tel qu'indiqué sur la figure :

Le serveur lit la liste des ressources et la charge dans le fichier modèle

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

Copier après la connexion

Ce middleware monte la liste de ressources dans ctx.state (variable de modèle) en lisant manifest.json, puis vous pouvez directement référencer la variable de ressource statique dans le modèle

<!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>

Copier après la connexion

Il est à noter que le rendu back-end utilisant généralement plusieurs entrées, il vous suffit d'introduire les fichiers d'entrée requis dans le modèle correspondant.

Chargement à chaud

En fait, il existe de nombreuses solutions pour le chargement à chaud : browsersync, live reload, etc., mais ce sont des rechargements complets, qui ne font que réduire la fréquence de f5. Le chargement à chaud de Webpack est beaucoup plus pratique via websocket (en particulier, je ne suis pas sûr), et il est très simple à configurer

Ajouter

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

Copier après la connexion

Ajouter au plug-in : new webpack.HotModuleReplacementPlugin()

Il y a deux points à noter :

extract-text-webpack-plugin ne peut pas être rechargé à chaud après l'avoir ajouté. N'ajoutez pas ce plug-in lors de la configuration du développement
Selon la documentation du webpack, chaque fichier d'entrée doit ajouter le code suivant pour réaliser un rechargement à chaud de js

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

Copier après la connexion

La configuration complète et le code ne seront pas affichés ici L'adresse de l'entrepôt (une partie du code django est dans la branche master) : https://github.com/xiadd/wepack-mutipage

Recommandations associées :

Réagissez à l'isomorphisme front-end et back-end pour éviter les rendus répétés

Pratique de rendu côté serveur Vue.js de Nuxt

Explication du rendu vue.js et connaissance des boucles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!