Explication détaillée de l'utilisation de l'actualisation à chaud et du chargement à chaud du webpack

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du rafraîchissement à chaud et du chargement à chaud du webpack. Quelles sont les précautions lors de l'utilisation du rafraîchissement à chaud et du chargement à chaud du webpack. Voici des cas pratiques, prenons un. regarder.

Webpack est très puissant et un échafaudage raisonnable peut nous éviter beaucoup de travail fastidieux et dénué de sens. Parmi eux, l'actualisation à chaud et le chargement à chaud améliorent considérablement le rythme de développement par rapport au développement traditionnel.

Découvrez la différence entre l'actualisation à chaud et le chargement à chaud à partir d'un échafaudage

Je crois que la plupart des développeurs de vue partent de vue-cli, et de nombreux débutants courent avec plaisir, je ne le fais pas osez changer la configuration de vue-cli à volonté tout en travaillant sur le projet vue (après tout, webpack est effectivement très compliqué, et vue-cli a aussi fait beaucoup de travail pour optimiser l'expérience des débutants).

En revanche, React ne fournit pas un échafaudage relativement robuste (du moins il n'est pas visiblement trouvé par moi, j'espère que vous pourrez m'éclairer). Pour autant que je sache, l'un est le générateur-react-webpack de Yeoman, l'application create-react-app de React et un bon kit de démarrage de réaction (chargement à chaud et intègre beaucoup de code, qui est hautement référencé).
Lorsque j'apprenais React, j'ai découvert que les deux premiers échafaudages de réaction mentionnés ci-dessus fournissent un rafraîchissement à chaud plutôt qu'un chargement à chaud.

Distinction simple entre le chargement à chaud et l'actualisation à chaud :

Actualisation à chaud : une fois le fichier modifié, la page entière est actualisée sans conserver aucun statut (comme la saisie de contenu) Formulaire de saisie), ce qui équivaut à webpack vous aidant à appuyer sur F5 pour actualiser
Chargement à chaud : une fois le fichier modifié, la zone modifiée est modifiée au coût minimum. Conservez autant que possible l'état avant de modifier le fichier (après avoir saisi le contenu d'entrée, modifiez le code des autres balises)

Bien que les deux améliorent l'expérience de développement par rapport au développement traditionnel (manuel F5), les deux L'écart est encore énorme, d'autant plus que le projet devient plus complexe, il faut résoudre ce problème une fois pour toutes (en laissant plus de temps pour développer les bugs).

Modification pratique

La configuration à partir de zéro est un autre domaine, nous commençons donc à apporter des modifications directement à partir de vue-cli.

Les étapes suivantes répertorient uniquement la clé pour référence d'inspiration. Pour plus de détails, veuillez vous référer au projet complet final de github

1. Supprimerlié à vue. dépendances, fichiers, etc. ; Tout dans le scr peut être supprimé

2. la dépendance package.json est ajoutée à babel-loader webpack-dev-server réagis-hot-loader (le plus important chose)

3. paramètre de ligne de commande package.json "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

4. Les fichiers .jsx ajoutés par Webpack.base.conf doivent être traités par babel-loader, configurez les options : {plugins :['react-hot-loader/babel']}

5. . Ajoutez des préréglages babelrc pour réagir et ajoutez des plugins ci-dessous : ['react-hot-loader/babel']

6. Créez main.js dans le src (nommez-le selon la configuration du webpack Fichier d'entrée cohérent)

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';
import App from './pages/App'; // 自己写吧
import './assets/css/reset.scss';
// Render the main component into the dom
ReactDOM.render(<App/>, document.getElementById('app'));
export default hot(module)(App); // 热加载的关键

À ce stade, nous pouvons volontiers utiliser React pour expérimenter le plaisir du chaud chargement~

Problème où

modifie en fait simplement le fichier main.js dans vue-cli pour réagir au code lié (n'oubliez pas de configurer babel pour traiter jsx) et actualisation toujours à chaud.

Après avoir observé et comparé le code local, j'ai trouvé un nom attrayant :

Dans le fichier webpack.dev.conf :

new webpack.HotModuleReplacementPlugin()

Requête en ligne J'ai appris plus tard que c'est la clé pour réaliser un chargement à chaud. Cela nécessite que le code lui-même soit modulaire (cela signifie que tout framework capable d'écrire des composants réutilisables comme les trois principaux frameworks peut l'utiliser). propriété), de sorte que le chargement à chaud puisse être réalisé en branchant et en débranchant du code.

Les effets spéciaux jsx de React ne peuvent pas être gérés par HotModuleReplacementPlugin et ne peuvent être actualisés qu'à chaud.

Dans ce cas, React-hot-loader est sur le point de sortir. Conformément à la méthode d'utilisation officielle, vous pouvez continuer à utiliser le rechargement à chaud.

ps : Pour référence seulement, j'explore et apprends également beaucoup de codes de réaction

Adresse du projet configurée : gayhub

Je pense que vous l'avez maîtrisé après avoir lu le cas dans cet article Pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Explication détaillée de l'emballage et de l'utilisation des multi-modules vue-cli

node+token implémente la vérification

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!