Explication détaillée des concepts de base du framework Webpack

Webpack est un outil de packaging front-end (pas une bibliothèque ou un framework). Il peut utiliser diverses ressources, telles que JS (y compris JSX), coffee, css (y compris less/sass), images, etc. Manipulation et utilisation. Cet article présente principalement les concepts de base du framework Webpack (compilation de points de connaissances). Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Points de connaissances de base

　1.1 webpack est un packager de modules pour les applications JavaScript modernes (module regroupeur). Lorsque webpack traite une application, il crée de manière récursive un graphe de dépendances 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 lequel file est ce dont dépend le fichier d'entrée, afin de construire un graphe de dépendances interne et de le sortir dans un fichier appelé bundles après traitement

　1.2.2 sortie (output) : Spécifiez le fichier bundle traité par l'entrée point Le chemin de sortie (chemin) et le nom (nom de fichier) de l'emballage et des autres traitements ; le chargeur webpack convertit essentiellement tous les types de fichiers en modules qui peuvent être directement référencés par le graphe de dépendances de l'application. Il a deux objectifs :

. 1.2.3.1 Utilisez l'attribut test pour identifier les fichiers convertibles correspondants pour le 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 utiliser webpack Pour définir le chargeur dans la configuration, il doit être défini dans module.rules, pas dans les règles

　1.2.4 plugins : 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 le 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 à l'aide de l'opérateur new.

webpack fournit de nombreux plugins disponibles prêts à l'emploi ! Consultez la liste des plug-ins pour plus d'informations. Pour des images et des textes plus détaillés, veuillez vous référer à la documentation officielle https://doc.webpack-china.org/concepts/.

Recommandations associées :

Explication détaillée des exemples de développement de sites multipages webpack+express

Tutoriel électronique pour créer React et les applications de bureau Webpack

Résumé de l'optimisation des performances frontales du didacticiel d'apprentissage Webpack

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!