Un guide du débutant sur WebPack

Cet article explore WebPack - un puissant packer de module statique qui simplifie et optimise les workflows de développement Web. Bien que la documentation WebPack soit détaillée, les débutants peuvent toujours faire face au problème d'une courbe d'apprentissage abrupte. Ce tutoriel est conçu pour vous aider à maîtriser les concepts de base de WebPack et à vous guider à travers les opérations pratiques étape par étape.

Points de base:

• Bases WebPack: WebPack traite tous les fichiers et ressources comme des modules, construit des graphiques de dépendance et génère un ou plusieurs faisceaux pour le déploiement Web.
• Présentation des concepts de base: Comprendre l'entrée, la sortie, les chargeurs, les plugins et les paramètres de mode dans différents environnements (développement, production) utilisent efficacement WebPack.
• WEBPACK 5 Améliorations: Edition 5 introduit des fonctionnalités telles que le cache persistant, l'amélioration des tremblements d'arbres et supprimer des polyfills Node.js automatiques pour améliorer les performances et réduire la taille du bundle.
• Débutant de WebPack: Démarrer le projet WebPack en définissant des fichiers de configuration de base, en comprenant les paramètres par défaut et en utilisant des plug-ins tels que html-webpack-plugin pour effectuer une génération de HTML dynamique.
• Utilisation avancée: Apprenez à utiliser style-loader et css-loader pour traiter CSS, utilisez des modules intégrés pour remplacer les anciens chargeurs pour gérer les ressources et utiliser le serveur de développement de WebPack pour un rechargement en temps réel pour optimiser le processus de développement.
• Environnement de production meilleures pratiques: Utiliser les capacités de WebPack pour transformer le javascript moderne, gérer les styles et les ressources et accélérer le développement à l'aide d'outils tels que webpack-dev-server et d'optimisations pour la création de version de production.

Qu'est-ce que WebPack?

Le cœur de WebPack est un packer de module statique. Dans un projet spécifique, WebPack traite tous les fichiers et ressources comme des modules et s'appuie sur un graphique de dépendance. Ce diagramme de dépendance décrit comment les modules sont associés les uns aux autres via des références (require et import instructions) entre les fichiers. WebPack itère statiquement via tous les modules pour créer le graphique et l'utilise pour générer un seul bundle (ou plusieurs faisceaux) - un fichier JavaScript contenant du code de tous les modules et combiné dans l'ordre correct. "Statiquement" signifie que lorsque WebPack construit son graphique de dépendance, il n'exécute pas le code source, mais combine plutôt les modules et leurs dépendances dans un bundle. Vous pouvez ensuite l'inclure dans votre fichier HTML.

concepts principaux de WebPack:

Avant de pratiquer profondément, nous devons comprendre clairement certains des principaux concepts de WebPack:

• Entrée: Le point d'entrée est le module que WebPack utilise pour commencer à créer son graphique de dépendance interne. À partir de là, il détermine d'autres modules et bibliothèques (directement et indirectement) dont le point d'entrée dépend et les inclut dans le graphique jusqu'à ce qu'il n'y ait pas de dépendances restantes. Par défaut, la propriété entry est définie sur ./src/index.js, mais nous pouvons spécifier différents modules (ou même plusieurs modules) dans le fichier de configuration WebPack.
• Sortie: output L'attribut indique où le webpack émet le bundle et le nom à utiliser pour le fichier. Les valeurs par défaut pour cette propriété sont ./dist/main.js du bundle principal et ./dist d'autres fichiers générés (tels que des images). Bien sûr, nous pouvons spécifier différentes valeurs dans la configuration au besoin.
• chargeurs: Par défaut, WebPack ne comprend que les fichiers JavaScript et JSON. Pour traiter d'autres types de fichiers et les convertir en modules valides, WebPack utilise un chargeur. Le chargeur convertit le code source des modules non-javascript, nous permettant de prétraiter ces fichiers avant de les ajouter au graphique de dépendance. Par exemple, un chargeur peut convertir des fichiers du langage CoffeeScript en JavaScript, ou convertir les images en ligne en URL de données. À l'aide du chargeur, nous pouvons même importer des fichiers CSS directement à partir du module JavaScript.
• Plugins: Les plugins sont utilisés pour toutes les autres tâches que le chargeur ne peut pas effectuer. Ils nous fournissent un large éventail de solutions pour la gestion des ressources, la minimisation et l'optimisation du faisceau, etc.
• MODE: Habituellement, lorsque nous développons une application, nous utilisons deux types de code source - un pour la création de versions de développement et un pour la création de version de production. WebPack nous permet de définir la version à générer en modifiant le paramètre mode en development, production ou none. Cela permet à WebPack d'utiliser des optimisations intégrées correspondant à chaque environnement. La valeur par défaut est production. Le mode none signifie qu'aucune option d'optimisation par défaut n'est utilisée.

Comment fonctionne WebPack:

Même un projet simple contient des fichiers HTML, CSS et JavaScript. De plus, il peut également contenir des ressources telles que des polices, des images, etc. Par conséquent, un flux de travail WebPack typique comprendra la configuration des fichiers index.html avec des liens CSS et JS appropriés et les ressources nécessaires. De plus, si vous avez beaucoup de modules CSS et JS interdépendants, vous devez les optimiser et les combiner correctement dans une unité prête à la production.

Pour faire tout cela, WebPack repose sur la configuration. À partir de la version 4 et ultérieure, WebPack fournit des valeurs par défaut raisonnables hors de la boîte, donc aucun fichier de configuration n'est requis. Cependant, pour tout projet non simple, vous devez fournir un fichier spécial webpack.config.js qui décrit comment convertir les fichiers et les ressources et quel type de sortie doit être généré. Ce fichier peut rapidement devenir énorme, ce qui rend difficile la compréhension du fonctionnement de WebPack à moins que vous ne compreniez les principaux concepts de son fonctionnement.

En fonction de la configuration fournie, WebPack commence au point d'entrée et analyse chaque module qu'il rencontre lors de la création du graphique de dépendance. Si le module contient des dépendances, ce processus est effectué récursivement pour chaque dépendance jusqu'à ce que la traversée soit terminée. WebPack regroupe ensuite les modules de tous les projets en un petit nombre de faisceaux (généralement un seul) pour que le navigateur puisse charger.

Nouvelles fonctionnalités de WebPack 5:

WebPack 5 a été publié en octobre 2020. L'annonce est longue et explore toutes les modifications apportées à WebPack. Il est impossible de mentionner tous les changements, et il n'est également pas nécessaire pour les guides des débutants comme celui-ci. Au lieu de cela, je vais essayer de répertorier certains points généraux:

• Utilisez du cache persistant pour améliorer les performances de construction. Les développeurs peuvent désormais activer la mise en cache basée sur le système de fichiers, ce qui accélérera le développement et les builds.
• La mise en cache à long terme a également été améliorée. Dans WebPack 5, les modifications apportées au code (commentaires, noms de variables) qui n'affectent pas la version de bundle minimisée ne provoquera pas l'invalidation du cache. De plus, de nouveaux algorithmes sont ajoutés qui affectent les ID numériques courts aux modules et aux blocs de manière déterministe et aux noms courts à l'exportation. Dans WebPack 5, ils sont activés par défaut en mode de production.
• La taille du bundle a été améliorée en raison d'une meilleure secousse des arbres et de la génération de code. Grâce à la nouvelle fonctionnalité de tremblement d'arbre imbriqué, WebPack est désormais en mesure de suivre l'accès aux propriétés imbriquées à l'exportation. Le tremblement d'arbre CommonJS nous permet d'éliminer les exportations de CommonJS inutilisées.
• La version Node.js prise en charge minimale est passée de 6 à 10.13.0 (LTS).
• La base de code a été nettoyée. Supprimé tous les éléments marqués comme obsolètes dans WebPack 4.
• Retirez les polyfills Node.js automatiques. Les versions précédentes de WebPack incluent des polyfills pour les bibliothèques natives Node.js telles que crypto. Dans de nombreux cas, ils ne sont pas nécessaires et augmentent considérablement la taille du bundle. C'est pourquoi WebPack 5 arrête le remplissage automatique de ces modules de base et se concentre sur les modules compatibles frontaux.
• En tant qu'amélioration du développement, WebPack 5 nous permet de transmettre des listes cibles et de prendre en charge les versions cibles. Il fournit une détermination automatique du chemin cible. De plus, il fournit une dénomination automatique et unique, ce qui empêche les conflits entre plusieurs temps d'exécution WebPack en utilisant la même variable globale pour le chargement de blocs.
La commande
• webpack-dev-server est maintenant webpack serve.
• introduit le module de ressource, qui remplace l'utilisation de file-loader, raw-loader et url-loader.

débutant:

Maintenant, nous avons une base théorique solide, réalisons-nous dans la pratique.

Tout d'abord, nous créerons un nouveau répertoire et y passerons. Ensuite, nous initialiserons un nouveau projet:

mkdir learn-webpack
cd learn-webpack
npm init -y

Ensuite, nous devons installer WebPack et WebPack CLI localement (interface de ligne de commande):

npm install webpack webpack-cli --save-dev

Ensuite, nous créerons un répertoire src et y mettrons un fichier index.js dedans afin qu'il contienne console.log("Hello, Webpack!");. Maintenant, nous pouvons exécuter la tâche dev pour démarrer WebPack en mode développement:

npm run dev

Comme mentionné précédemment, WebPack définit le point d'entrée par défaut sur ./src/index.js et définit la sortie par défaut sur ./dist/main.js. Ainsi, lorsque nous exécutons la tâche dev, ce que WebPack fait, c'est obtenir le code source du fichier index.js et regrouper le code final dans le fichier main.js.

Pour vérifier que nous obtenons la bonne sortie, nous devons afficher les résultats du navigateur. Pour ce faire, créons un fichier dist dans le répertoire index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Getting Started With Webpack</title>
  </head>
  <body>
    <🎜>
  </body>
</html>

Maintenant, si nous ouvrons le fichier dans notre navigateur, nous devrions voir le message "Hello, WebPack!" Dans la console.

(Le contenu suivant sera brièvement résumé en raison des limitations de l'espace, et les étapes de base et les extraits de code de clé sont conservés. Veuillez vous référer au texte d'origine pour le tutoriel complet.)

Utilisez html-webpack-plugin: installer et configurer le plug-in html-webpack-plugin pour générer et mettre à jour automatiquement index.html pour éviter la modification manuelle.

Entrée et sortie personnalisées: Modifier webpack.config.js, personnaliser le fichier d'entrée et le répertoire de sortie et le nom du fichier.

Convertir JavaScript moderne en es5: installer babel-loader, configurer webpack.config.js, convertir le code ES6 en code compatible ES5.

Styles de traitement: Installer css-loader et style-loader, configurez dans webpack.config.js, importez et appliquez le fichier CSS à la page.

Gestion des ressources: Utilisez le module asset/resource intégré

dans WebPack 5 pour traiter des ressources telles que les images.

Utilisez WebPack-dev-Server pour accélérer le développement: webpack-dev-server Installez et configurez

pour obtenir un rechargement en temps réel.

Nettoyez la sortie: clean-webpack-plugin Utilisez le

pour nettoyer le répertoire de sortie.

Conclusion:

Ce tutoriel introduit uniquement les concepts de base de WebPack, qui fournit également de nombreuses autres fonctionnalités, plug-ins et différentes technologies. Il est recommandé de vous référer à des documents officiels et à d'autres ressources d'apprentissage pour étudier plus loin.

FAQ WebPack (version abrégée):

• La différence entre WebPack et autres packers de modules? WebPack possède un puissant système de plug-in, prend en charge plusieurs types de fichiers et dispose de capacités de segmentation de code.
• Comment configurer WebPack pour s'adapter à plusieurs environnements? Créez différents fichiers de configuration et fusionnez les configurations à l'aide de webpack-merge.
• Comment WebPack gère-t-il CSS? Utiliser style-loader et css-loader.
• Qu'est-ce que le remplacement du module chaud (HMR) dans WebPack? permet la mise à jour des modules lors de l'exécution sans rafraîchir complètement la page.
• Comment optimiser la construction de la version de production de WebPack? Compression de code, tremblement d'arbre, segmentation du code, etc.
• Comment utiliser WebPack avec Babel? installer babel-loader et configurer.
• Comment utiliser WebPack avec TypeScript? installer ts-loader ou awesome-typescript-loader.
• Comment utiliser WebPack pour traiter les images? utiliser file-loader ou url-loader (WebPack 5 utilise des modules d'actifs).
• Comment utiliser WebPack avec React? Utiliser babel-loader pour gérer JSX, vous pouvez utiliser react-hot-loader.
• Comment déboguer la configuration de WebPack? Utilisez les options debug et devtool pour afficher les messages d'erreur et la pile des traces.

J'espère que ce tutoriel abrégé vous aidera à démarrer avec WebPack rapidement. Pour plus de détails, veuillez vous référer au texte d'origine.

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!