Résumé de l'utilisation du framework Webpack

Cette fois, je vais vous apporter un résumé de l'utilisation du framework Webpack. Quelles sont les précautions lors de l'utilisation du framework Webpack. Ce qui suit est un cas pratique, jetons un coup d'œil.

Qu'est-ce que le webpack

Webpack est un outil d'empaquetage frontal (pas une bibliothèque ou un framework). Il peut traiter et utiliser diverses ressources, telles que JS (y compris JSX), coffee, css (y compris less/sass), images, etc.

1. Points de connaissances de base

1.1 webpack est un bundler de modules pour les applications JavaScript modernes. Lorsque le webpack Au fur et à mesure qu'une application est traitée, elle crée de manière récursive un graphe de dépendances graph), qui contient tous les modules dont l’application a besoin, puis regroupe tous ces modules dans un ou plusieurs bundles.

1.2 Les quatre concepts fondamentaux du webpack :

1.2.1 entrée : point d'entrée, point de départ d'entrée (il peut y en avoir plusieurs), webpack partira de ce point de départ pour savoir quel est ce dont dépend le fichier d'entrée pour construire un graphe de dépendances interne, le traiter et le sortir dans un fichier appelé bundles

1.2.2 sortie : Spécifiez l'entrée Le chemin de sortie (chemin ) et nom (nom du fichier) du fichier bundle traité par point     

1.2.3 chargeur : utilisé pour traiter les fichiers non-JS. Il peut convertir tous les fichiers en modules que Webpack peut traiter, puis les transmettre à Webpack pour l'empaquetage et d'autres traitements ; Loader convertit essentiellement tous les types de fichiers en modules pouvant être directement référencés par le graphe de dépendances de l'application. Il a deux objectifs :

1.2.3.1 Utiliser l'attribut test pour identifier le convertible correspondant aux fichiers du chargeur

1.2.3.2 Utilisez l'attribut use pour convertir ces fichiers afin qu'ils soient ajoutés au graphe de dépendances et éventuellement ajoutés au bundle

Si vous souhaitez définir le chargeur dans la configuration du webpack, A définir dans module.rules au lieu de règles

plugins 1.2.4 : de l'optimisation et de la compression du packaging à la redéfinition des variables dans l'environnement. L'interface du plug-in est extrêmement puissante et peut gérer une variété de tâches

Pour utiliser un plug-in, il vous suffit de require() puis de l'ajouter au tableau des plugins. La plupart des plugins peuvent être personnalisés via des options. Vous pouvez également utiliser le même plug-in plusieurs fois à des fins différentes dans un fichier de configuration. Dans ce cas, vous devez en créer une instance en utilisant le nouvel opérateur.

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 prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

vue-cli+webpack Comment créer un environnement de développement de vue

Comment construire la vue2 -cadre webpack2

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!