Explication détaillée de la configuration du webpack et du rendu backend-js tutoriel-php.cn

Explication détaillée de la configuration du webpack et du rendu backend

小云云

Libérer： 2018-01-02 10:38:38

original

1821 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 pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Rendu back-end de la configuration Webpack En 2017, vue, React et Angular ont occupé la place dominante 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 individuel. Il s'agit toujours d'un projet commercial, et le rendu back-end est vraiment approximatif et rapide. Mais avec le développement du front-end, du back-end. Le rendu final a également beaucoup de place à l'amélioration.Je vais présenter ici ma propre expérience pratique : Lorsque 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. koa par exemple, mais il existe également 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 jeter un œil à la fin de l'article. 🎜>

Diagramme des effets

Principe

Le principe est quand même très simple :

1. serveur de ressources indépendamment pour l'empaquetage et la génération Liste de ressources (manifeste)

Générez le fichier manifest.json

new ManifestPlugin({
  writeToFileEmit: true,
  publicPath: 'http://localhost:5000/static/'
})

Copier après la connexion

via le plug-in webpack-manifest-plugin Le résultat du fichier. est comme 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, 'assets/bundles/manifest.json'))
 ctx.state = {
  static: JSON.parse(manifest.toString())
 }
 await next()
})

Copier après la connexion

Ce middleware monte la liste des ressources dans ctx.state (variable du modèle) en lisant manifest.json , puis vous pouvez référencer directement les variables de ressources statiques 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 convient de noter que depuis le rendu back-end généralement utilise 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 : synchronisation du navigateur, rechargement en direct. , etc., mais ce sont des rechargements complets et ne font que réduire la fréquence de chargement à chaud de Webpack. C'est beaucoup plus pratique via websocket (je ne connais pas les détails), et la configuration est également très simple

<.> Ajoutez

au fichier d'entrée et ajoutez : new webpack.HotModuleReplacementPlugin( )

hot: 'webpack/hot/only-dev-server',
devServerClient: 'webpack-dev-server/client?http://0.0.0.0:5000'

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

Copier après la connexion

Il y a deux points à noter :

Recommandations associées :

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

Copier après la connexion

À propos de la mise en œuvre du système de notation par étoiles du rendu Angularjs à l'aide directive

Vuejs utilise vue-markdown pour restituer la méthode de commentaire

Explication détaillée de la méthode de React pour rendre les composants sur des nœuds DOM spécifiés

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!