Tutoriel d'introduction à WebPack détaillé

Cette fois, je vais vous apporter une introduction détaillée au tutoriel d'introduction de WebPack. Quelles sont les précautions pour démarrer avec WebPack. Voici des cas pratiques, jetons un coup d'œil.

1. Qu'est-ce que Webpack

WebPack peut être considéré comme un packager de modules : son rôle est d'analyser la structure de votre projet, de trouver des modules JavaScript et d'autres langages d'extension​​que les navigateurs ne peuvent pas exécuter directement (Scss, TypeScript, etc.), et emballez-le dans un format approprié pour être utilisé par le navigateur.

2.Pourquoi utiliser WebPack

De nos jours, de nombreuses pages Web peuvent en fait être considérées comme des applications riches en fonctionnalités. Elles contiennent un code JavaScript complexe et de nombreux packages de dépendances. Afin de simplifier la complexité du développement, de nombreuses bonnes pratiques ont émergé dans la communauté front-end

a:La modularisation nous permet d'affiner des programmes complexes en petits fichiers ;

b : Semblable à TypeScript, un langage de développement basé sur JavaScript : il nous permet d'implémenter des fonctionnalités qui ne peuvent pas être utilisées directement dans la version actuelle de JavaScript, et peuvent ensuite être converties en fichiers JavaScript afin que le navigateur puisse les reconnaître

;

c:scss, less et autres préprocesseurs CSS

.........

Ces améliorations ont en effet grandement amélioré notre efficacité de développement, mais les fichiers développés à l'aide de celles-ci nécessitent souvent un traitement supplémentaire pour être reconnus par le navigateur, et le traitement manuel est très anti-blocage, ce qui donne l'occasion à l'émergence d'outils comme WebPack.

3. Quelles sont les fonctionnalités de WebPack par rapport à Grunt et Gulp

En fait, Webpack n'est pas très comparable aux deux autres. Gulp/Grunt est un outil capable d'optimiser le processus de développement front-end, tandis que WebPack est une solution modulaire. Cependant, les avantages de Webpack permettent à Webpack de remplacer Gulp/Grunt. Des outils ressemblant à des grognements.

La façon dont Grunt et Gulp fonctionnent est la suivante : dans un fichier de configuration, spécifiez les étapes spécifiques pour effectuer des tâches telles que la compilation, la combinaison, la compression, etc. sur certains fichiers. Cet outil peut alors automatiquement effectuer ces tâches pour vous. .

La façon dont Webpack fonctionne est la suivante : traitez votre projet dans son ensemble, à travers un fichier principal donné (tel que : index.js), Webpack trouvera tous les fichiers dépendants de votre projet à partir de ce fichier, utilisera des chargeurs pour les traiter, et enfin Conditionné sous forme de fichier JavaScript pouvant être reconnu par le navigateur.

Avantages : Modularité

Aux yeux de webpack, tout est module ! C'est son avantage indispensable, y compris votre code JavaScript, y compris les CSS, les polices, les images, etc., ils peuvent tous être traités en tant que modules uniquement via des chargeurs appropriés.

1.CSS

webpack fournit deux outils pour gérer les feuilles de style, css-loader et style-loader, ils gèrent différentes tâches, css-loader vous permet d'utiliser des méthodes comme @import et url(...) La fonction de require() et style-loader ajoute tous les styles calculés à la page. La combinaison des deux vous permet d'intégrer la feuille de style dans le fichier JS packagé par webpack.

Besoin d'installer séparément : npm install --save-dev style-loader css-loader

2.Modules CSS

Au cours des dernières années, JavaScript a évolué rapidement grâce à de nouvelles fonctionnalités de langage, de meilleurs outils et de meilleures pratiques (telles que la modularisation). Les modules permettent aux développeurs de transformer du code complexe en petites unités propres avec des dépendances clairement définies, et sur la base d'outils d'optimisation, la gestion des dépendances et la gestion de la charge peuvent être automatiquement complétées.

Cependant, dans l'autre partie du front-end, le développement CSS est relativement lent et la plupart des feuilles de style sont encore énormes et pleines de noms de classes globales, ce qui rend la maintenance et la modification très difficiles et compliquées.

Récemment, il y a quelque chose appelé modules CSS La technologie est destinée à intégrer la pensée modulaire de JS dans CSS. Grâce aux modules CSS, tous les noms de classe et noms d'animation s'appliquent uniquement au module actuel par défaut. Webpack prend en charge la modularité CSS depuis le début. Après la configuration dans le chargeur, tout ce que vous avez à faire est de passer les "modules" aux endroits requis, puis vous pouvez directement transmettre le nom de la classe CSS au code du composant, et cela n'est efficace que pour le composant actuel, pas besoin de vous inquiéter. sur les problèmes qui peuvent résulter du fait d'avoir le même nom de classe dans différents modules.

De cette façon, les mêmes noms de classes ne se contamineront pas

3. Pré-compilation CSS

Les préprocesseurs comme Sass et Less sont des extensions du CSS natif qui vous permettent d'utiliser des éléments tels que des variables, des imbrications, des mixins, Pour écrire du CSS en utilisant l'héritage et d'autres fonctionnalités qui n'existent pas en CSS, le préprocesseur CSS peut convertir ces types spéciaux d'instructions en instructions CSS que le navigateur peut reconnaître,

Vous le connaissez peut-être maintenant. Vous pouvez le configurer à l'aide des chargeurs appropriés dans webpack. Les chargeurs de traitement CSS suivants sont couramment utilisés

. a:less-loader

b:sass-loader

c: chargeur de stylet

Il existe également une plate-forme de traitement CSS - PostCSS, qui vous permet d'utiliser CSS avec plus de fonctions, telles que la façon d'utiliser PostCSS. Nous utilisons PostCSS pour ajouter automatiquement des préfixes CSS au code CSS qui s'adaptent aux différents navigateurs.

Installez d'abord postcss-loader et autoprefixer (plug-in qui ajoute automatiquement des préfixes)

npm install --save-dev postcss-loader autoprefixer

Et définissez-le dans le fichier de configuration du webpack. Il vous suffit de créer un nouveau mot-clé postcss et d'y déclarer les plug-ins dépendants, comme suit. Maintenant, le CSS que vous écrivez ajoutera automatiquement différents préfixes en fonction des données dans Can. j'utilise.

2. webpack-pulgins

Les plugins sont utilisés pour étendre les fonctions de Webpack. Ils prendront effet tout au long du processus de construction et effectueront les tâches associées.

Les chargeurs et les plugins sont souvent confondus, mais ce sont en réalité des choses complètement différentes. On peut dire que les chargeurs sont utilisés pour traiter les fichiers sources (JSX, Scss, Less...) pendant le processus de packaging et de construction, un à la fois. sont traités un par un. Il n'agit pas directement sur un seul fichier, il affecte directement l'ensemble du processus de construction.

Webpack possède de nombreux plug-ins intégrés, ainsi que de nombreux plug-ins tiers, qui nous permettent de compléter des fonctions plus riches.

1. Comment utiliser le plug-in ?

Pour utiliser un plugin, nous devons l'installer via npm, puis tout ce que nous avons à faire est d'ajouter une instance du plugin dans la section des mots-clés plugins de la configuration du webpack (les plugins sont un tableau. Nous avons ajouté un plugin qui implémente le). déclaration de droit d'auteur. Tel que le plug-in HtmlWebpackPugin,

La fonction de ce plug-in est de vous aider à générer le fichier Html5 final basé sur un modèle simple. Ce fichier référence automatiquement votre fichier JS packagé. Chaque compilation insère une valeur de hachage différente dans le nom du fichier.

//Installer

npm install --save-dev html-webpack-pugin

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Explication détaillée de l'utilisation de l'héritage combiné parasite js

Implémentation JS de la couverture d'échiquier

Explication détaillée des étapes d'utilisation des objets prototypes js

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!