Quel est le principe de packaging du webpack ?

Le principe de l'empaquetage de Webpack est d'analyser statiquement les dépendances entre les fichiers, puis de générer des ressources statiques à partir de ces modules selon des règles spécifiées. Lorsque Webpack traite le programme, il construira de manière récursive un graphe de dépendances, où contient chaque module. dont votre application a besoin, puis regroupe tous ces modules dans un ensemble.

effectuera une analyse statique des dépendances entre les fichiers, puis ces modules généreront des ressources statiques selon les règles spécifiées. Lorsque webpack gérera le programme, il le fera. être récursif Créez un graphe de dépendances contenant tous les modules dont votre application a besoin, puis regroupez tous ces modules dans un ou plusieurs bundles.

Webpack n'est qu'un mécanisme pour empaqueter des modules. Il convertit simplement les modules dépendants en fichiers statiques qui peuvent représenter ces packages. Il ne s'agit pas d'une spécification modulaire telle que commonjs ou amd. webpack identifie votre fichier d'entrée. Identifiez les dépendances de votre module pour empaqueter votre code.

Quant à savoir si votre code utilise l'importation commonjs, amd ou es6. webpack l'analysera. pour obtenir les dépendances du code.

Ce que fait Webpack, c'est analyser le code. Convertir le code, compiler le code, sortir le code. Webpack lui-même est un module de nœud, donc webpack.config.js est écrit sous la forme de commonjs (la modularisation dans le nœud est standardisée par commonjs)

Chaque module de webpack a un identifiant unique, qui vient de l'augmentation croissante de 0. L'ensemble bundle.js emballé est une fonction anonyme qui s'exécute toute seule. Le paramètre est un tableau. Chaque élément du tableau est une fonction. Le contenu de la fonction est le contenu de chaque module et est organisé dans l'ordre requis.

Informations détaillées :

Concepts de base du webpack :

1. Le point d'entrée indique quel module webpack doit utiliser pour commencer à créer son graphe de dépendances interne. Après avoir entré le point d'entrée, webpack découvrira de quels modules et bibliothèques dépend le point d'entrée (directement et indirectement). Chaque dépendance est ensuite traitée et générée dans des fichiers appelés bundles.

2. Sortie

L'attribut de sortie indique à webpack où sortir les bundles qu'il crée et comment nommer ces fichiers. La valeur par défaut est ./dist. Fondamentalement, toute la structure de l'application sera compilée dans le dossier du chemin de sortie spécifié.

3. Module

Module, tout dans Webpack est un module, et un module correspond à un fichier. Webpack trouvera de manière récursive tous les modules dépendants à partir de l'entrée configurée.

4. Chunk

Bloc de code. Un Chunk est composé de plusieurs modules et est utilisé pour la fusion et le fractionnement du code.

5. Loader

loader permet à Webpack de traiter des fichiers non JavaScript (le webpack lui-même ne comprend que JavaScript).

Loader peut convertir tous les types de fichiers en modules valides que Webpack peut traiter, et vous pouvez ensuite utiliser les capacités d'empaquetage de Webpack pour les traiter.

Essentiellement, le chargeur webpack convertit tous les types de fichiers en modules pouvant être directement référencés par le graphe de dépendances de l'application (et finalement le bundle).

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!