Tutoriel de la page de démarrage: 2021 guide complet étape par étape

Webpack a publié la version 5.0.0 en octobre 2020 et a été mis à jour plusieurs fois depuis.
En particulier, webpack 4.0.0 est la première version de webpack qui n’a pas besoin de fichiers webpack. Configuration. JS regroupe vos projets. Cela facilite le démarrage des nouveaux développeurs. Ce tutoriel Web se concentre sur la dernière version majeure (5.xx au moment de la rédaction de cet article). Vous pouvez voir plus d’historique de paquets Web à travers leurs journaux de changement, mais voyons maintenant comment vous pouvez utiliser des paquets Web dans votre projet. Voulez – vous apprendre rapidement le paquet Web? Ce tutoriel vous tiendra au courant des dernières informations Cliquez pour tweeter pour installer un paquet Web pour installer webpack 5 vous avez besoin de node 10.13.0 ou plus, donc si vous n’avez pas mis à jour Node depuis un certain temps, vous devez le mettre à jour avant d’installer webpack.
La documentation webpack recommande fortement que webpack soit installé localement plutôt que globalement. Cela signifie que vous devriez l’installer séparément sur chaque projet, plutôt que d’utiliser une seule installation globale sur chaque projet. Grâce à une installation locale séparée, vous pourrez mettre à jour (ou ne pas mettre à jour) chaque installation au besoin. Pour apprendre ce tutoriel Web, créez un répertoire de projets pour exécuter les différentes commandes que je vais couvrir. Lorsque le Répertoire du projet est prêt, vous exécutez les deux commandes suivantes (la première commande assure que vous êtes dans le répertoire):
CD webpack Sample NPM Init – y dans ce cas, j’appelle le dossier d’accueil de l’exemple de projet webpack Sample. Tu peux donner ton nom comme tu veux. La commande NPM Init – y initialise le répertoire en utilisant les paramètres NPM par défaut pour créer un fichier paquet. Json. Ensuite, je vais installer webpack et CLI webpack NPM installer webpack webpack CLI – – Enregistrer le développeur après l’installation
Ou les deux paquets sont des dépendances du projet, mon fichier de paquets. Json ressemble à: {name \
L’élément est actuellement configuré pour être groupé et n’a pas encore été groupé. Ajoutons donc quelque chose pour montrer comment un simple processus de groupement peut se produire. Cela suffit pour commencer avec la page Web, mais je discuterai plus tard de certaines configurations que vous pouvez ajouter pour rendre la page plus puissante. Au même endroit que mes fichiers de paquets. Json, je vais ajouter ce qui suit: un dossier nommé SRC, un fichier index. Le HTML dans SRC est un fichier index. Si vous souhaitez suivre les étapes de ce tutoriel Web, continuez à ajouter JS dans le dossier SRC a Dist. La documentation webpack explique bien le but des dossiers SRC (source) et Dist (bien que cela ne soit pas spécifique à webpack, il s’agit plus du regroupement et du processus de construction):
Le code source est le Code que nous écrirons et modifierons. Le Code de distribution est la sortie minimisée et optimisée de notre processus de compilation et sera affiché par le navigateur. Idéalement, chaque fois que vous créez un paquet, le paquet de configuration vide le dossier Dist. J’en parlerai plus en détail plus tard, mais maintenant je vais me concentrer sur
Lors de l’édition d’un fichier dans un dossier SRC (l’édition se fait toujours dans ce dossier). Tout d’abord, je dois ajouter du contenu à ces deux index. Html au lieu d’index. JS. Fichier index. Bien sûr, HTML peut contenir n’importe quoi. J’ai l’habitude d’inclure tout le contenu du site dans le répertoire SRC, y compris les feuilles de style, les images, etc. Mais cet exemple simple est utilisé pour démontrer la fonctionnalité de webpack.
Traditionnellement, lorsque vous voulez ajouter une ou plusieurs bibliothèques à un projet en tant que dépendances, vous pouvez les Lister au bas de la page index. Utiliser le HTML de l’élément Un par un. Vous inclurez également un JavaScript personnalisé qui utilise ces autres dépendances. C’est l’aide d’outils comme webpack, parce que vous pouvez non seulement éviter d’ajouter manuellement des scripts à une page, mais aussi ajouter des scripts, grouper des scripts pour l’optimisation, et parfois même télécharger des scripts au besoin. Plutôt que d’utiliser des méthodes traditionnelles et non optimales pour ajouter et intégrer des scripts, j’installerai des dépendances en utilisant NPM, puis je les grouperai en utilisant des paquets Web. À des fins de démonstration, je vais utiliser deux bibliothèques d’utilitaires javascript:
Flicking – un carosello JavaScript Pan zoom – un framework PAN \/ zoom to be clear: webpack n’en a pas besoin; J’ai choisi au hasard quelques exemples d’utilitaires pour démontrer la fonctionnalité de regroupement de pages Web. Votre projet comprendra plusieurs bibliothèques et utilitaires, peut – être des outils plus grands comme React, vue ou Babel. JS est utilisé pour traverser le javascript du navigateur. Pour utiliser les utilitaires de mon choix, je dois les installer, donc je vais d’abord exécuter: NPM install panzoom – – Save NPM install @ egjs \/ flicking – – Save Code Language: CSS (CSS). Dans ce cas, j’utilise le drapeau – – Save au lieu de – – Save Dev parce que je veux qu’ils fassent partie de ma construction de production. Lorsque j’installe webpack, je l’installe en tant que dépendance du développeur, donc webpack ne le fait pas
Ça fera partie de ma production.
C’est mon paquet. Json a ajouté ce qui suit sous la section dépendances: \
Et les dépendances JavaScript utilisent les points d’entrée spécifiés et le dossier Dist pour générer la sortie. Dans ce cas, main. JS est le seul fichier généré que mon application utilisera. Bien que j’aie inclus un fichier index. Le HTML dans le dossier SRC n’a pas été traité par webpack, de sorte que webpack n’a généré que main. JS jusqu’à présent. Ouvre demain. Dans le dossier Dist, je trouve un fichier minimisé qui contient toutes les dépendances spécifiées dans le projet (dans ce cas, deux utilitaires et tous les utilitaires dont ils dépendent). ️ Note: si le CLI affiche un avertissement concernant les options de mode non définies, ne vous inquiétez pas pour le moment. Je vais vous montrer comment le corriger plus tard. Comme nous l’avons mentionné précédemment, Configurez le paquet Web pour générer du HTML, mon fichier index. Le HTML n’apparaît pas dans le répertoire Dist pendant le processus de groupement. Je peux le faire manuellement si nécessaire, mais cela empêche l’utilisation d’outils comme pages Web pour simplifier la construction. Pour aider, je vais installer un plug – in appelé HTML webpack plugin: NPM install HTML webpack plugin – – pour enregistrer Dev my devdependences dans le paquet. Json reflétera le changement: \
Le plugin bpack génère un fichier HTML simplifié qui ajoute mon paquet Javascript, référencé dans l’étiquette Dans la page. Le problème est que le fichier index n’est pas utilisé. Le HTML que j’ai créé à l’origine dans le dossier SRC. Nous configurons le plugin htmlwebpack pour utiliser ce fichier comme modèle plutôt que de créer notre propre fichier. Je vais apporter les changements suivants au SRC \/ index. Html: \
Est le paramètre par défaut. Si je continue à créer et à contrôler mon travail localement, cela peut être plus utile si mes fichiers ne sont pas minimisés. De plus, en spécifiant le mode, j’éviterai l’avertissement mentionné précédemment. Pour activer le mode de développement, j’a i ajouté une ligne à mon fichier Web. Configuration. JS, ce fichier complet ressemble maintenant à: Const path = require (‘path’); Module. Export = {plug – in: [New htmlwebpackplugin ({Hash: True, Title: \
« index. Html ‘, injection:’ body ‘}), mode:’ Development ‘, output: {clear: True}; Langage de code: module JavaScript (JavaScript) now. L’exportation comprend un objet de sortie avec une seule paire de propriétés \/ valeurs: Clean: true. Cela garantit que webpack nettoie mon dossier Dist avant chaque construction. Jusqu’à présent, j’ai utilisé le script NPM pour exécuter webpack et la commande npx webpack pour grouper mes ressources. C’est une façon de le faire, mais il est plus efficace d’utiliser webpack lors de l’exécution de commandes avec des scripts NPM. Ceci est utile lorsque je veux ajouter plus de commandes au processus de construction. Dans mon dossier. Json, il y a une section script. Je vais ajouter une ligne à la ligne pour qu’elle ressemble à ceci (encore une fois, Notez la virgule supplémentaire): \
Parce que j’utilise souvent PHP et WordPress). Cependant, webpack vous permet d’installer facilement un serveur de facturation en temps réel si vous en avez besoin. Pour installer le serveur en tant que dépendance du développeur, j’exécuterai la commande suivante dans le Répertoire d’accueil du projet: NPM install webpack Dev Server Save Dev une fois install é, j’ajouterai quelques lignes à mon fichier webpack. Configuration. Posté le mardi 17 décembre 2013 à 15: 00 Const path = required (\
Par conséquent, si je modifie le contenu du dossier SRC, le paquet est créé à nouveau dans DIST et le navigateur recharge automatiquement la page. Un dernier exemple d’implémentation d’un paquet Web avec toutes les fonctionnalités ci – dessus, la commande NPM Run Dev génère ma construction à chaque exécution. Ensuite, je peux créer un projet pour la production en utilisant la commande suivante: NPM Run Build ceci exécute le script de construction en mode production (comme décrit dans mon paquet.json). Dans mon cas, cela donne une version simplifiée de ce qui suit dans l’index. HTML dans le dossier Dist: < meta name = "description" content = " Exemple d’application Web Pack

Langage de code: les paquets Web HTML, XML (XML) mettent à jour mes substituants en utilisant les informations générées par le plugin htmlwebpack, le reste de mon modèle reste inchangé et, surtout, les paquets Web regroupent mes modules JavaScript dans un fichier maître. La référence de fichier JS utilise une valeur de chaîne de requête pour s’assurer que le navigateur charge une nouvelle version, pas une version mise en cache. Si je vois ma page dans mon navigateur, je verrai deux journaux de console pour m’assurer que le paquet Web regroupe correctement mes dépendances. Si vous suivez ce tutoriel Web, vous devriez obtenir les mêmes résultats. Conclusion de ce tutoriel Web il devrait suffire de commencer à utiliser la page Web! Dans ce tutoriel, j’a I fait beaucoup d’introduction à la page des débutants, mais je n’ai qu’une compréhension préliminaire de ce qui est possible. Par exemple, je n’ai intégré aucune fonctionnalité qui utilise CSS ou images. La documentation officielle sur le Web est techniquement lourde, mais vous devriez être en mesure de trouver beaucoup de contenu pour étendre ce que j’ai couvert dans ce tutoriel, en particulier pour le développement de première ligne. Vous remarquerez que je n’utilise pas ces deux utilitaires dans ce tutoriel Web