Framework Webpack (maîtriser la technologie de base)

Webpack est un bundler de modules pour les applications JavaScript modernes. Cet article présente principalement les concepts de base du framework Webpack (organisation des points de connaissances). Les amis dans le besoin peuvent se référer à

Qu'est-ce que webpack

webpack Il s'agit d'un outil d'empaquetage pour la construction front-end (pas une bibliothèque ou un framework). Il peut traiter et utiliser diverses ressources, telles que JS (y compris JSX), café, CSS (y compris less/sass), images, etc. modules.

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/.

Ce qui précède est le texte que j'ai compilé, j'espère qu'il sera utile à tout le monde

Articles connexes :

Comment implémenter les coordonnées croisées suite à l'effet de la souris dans JS

Problèmes concernant les chemins d'images non sécurisés lors de l'utilisation d'Angular4

Comment créer des applications Electron dans Webpack

Dans Webpack Concernant les problèmes de configuration d'optimisation dans

Comment ajouter dynamiquement à la liste dans jQuery

Comment implémenter la fonction de service client en ligne dans jQuery

Comment implémenter une animation d'entrée/sortie dans Vue

Introduction détaillée au routage et au middleware dans node.js

Comment implémenter la fonction de panier de base à l'aide d'Angular

Présentation détaillée des composants contrôlés et des composants non contrôlés dans React

Utilisation vue pour implémenter des opérations clavier simples

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!