Chargeurs Webpack vs plugins; quelle est la différence?
Quelle est la différence entre les chargeurs et les plugins dans Webpack?
Le documentation pour les plugins dit simplement:
Utilisez des plugins pour ajouter des fonctionnalités généralement liées aux ensembles dans Webpack.
Je sais que babel utilise un chargeur pour les transformations jsx/es2015, mais cela ressemble à d'autres tâches courantes (par exemple, copy-webpack-plugin) qui utilise des plugins.
Les chargeurs effectuent la transformation de pré-traitement de pratiquement tous les formats de fichiers lorsque vous utilisez sth comme require("my-loader!./my-awesome-module") dans votre code. Comparés aux plugins, ils sont assez simples car ils (a) n'exposent qu'une seule fonction à Webpack et (b) ne sont pas en mesure d'influencer le processus de construction proprement dit.
Les plugins, quant à eux, peuvent s’intégrer profondément dans WebPack, car ils peuvent enregistrer les points d’accroché dans le système de compilation de WebPacks et accéder (et modifier) le compilateur, ainsi que son fonctionnement et sa compilation. Par conséquent, ils sont plus puissants, mais aussi plus difficiles à maintenir.
Ajout de réponse complémentaire et plus simple.
Chargeurs:
Les chargeurs fonctionnent au niveau du fichier individuel pendant ou avant le paquet est généré .
Plugins:
Les plugins fonctionnent au niveau du lot ou et fonctionnent généralement au niveau end du processus de génération de paquet. Les plugins peuvent également modifier la manière dont les ensembles sont créés. Les plugins ont un contrôle plus puissant que les chargeurs.
Juste à titre d'exemple, vous pouvez voir clairement dans l'image ci-dessous où les chargeurs fonctionnent et où les plugins fonctionnent -
À la base, WebPack n'est qu'un regroupeur de fichiers. Considérant un scénario très simple (pas de division du code), cela pourrait signifier uniquement les actions suivantes (à un niveau élevé):
- trouver le fichier d'entrée et charger son contenu en mémoire
- correspondre à certains textes du contenu et évaluer ceux-ci (par exemple, @import)
- trouver les dépendances sur la base de l'évaluation précédente et faire la même chose avec elles
- cousez-les tous dans un paquet en mémoire
- écrire les résultats dans le système de fichiers
Lorsque vous examinez les étapes ci-dessus de près, cela résonne avec ce que fait un compilateur Java (ou un compilateur)). Il existe bien sûr des différences, mais celles-ci importent peu pour comprendre les chargeurs et les plugins.
Chargeurs:
sont ici parce que webpack promet de regrouper n’importe quel type de fichier.
Étant donné que Webpack ne dispose que de la capacité suffisante pour regrouper des fichiers js, cette promesse signifiait que l'équipe centrale de Webpack devait incorporer des flux de génération permettant au code externe de transformer un type de fichier particulier de manière à ce qu'il puisse être consommé.
Ces codes externes s'appellent des chargeurs et s'exécutent généralement aux étapes 1 et 3 ci-dessus. Ainsi, étant donné que l'étape à laquelle ces chargeurs doivent fonctionner est évidente, ils n'ont pas besoin de points d'ancrage et n'influencent pas non plus le processus de construction (car la construction ou le paquet ne se produit qu'à l'étape 4).
Les chargeurs préparent donc la scène pour la compilation et élargissent en quelque sorte la flexibilité du compilateur webpack.
Plugins:
sont présents parce que même si webpack ne promet pas directement une sortie variable, le monde le veut et Webpack le permet.
Étant donné que Webpack est essentiellement un ensemble et qu'il comporte plusieurs étapes et sous-étapes, vous pouvez utiliser ces étapes pour créer des fonctionnalités supplémentaires.
Le processus de génération de production (minimisation et écriture dans le système de fichiers), qui est une fonctionnalité native du compilateur webpack, peut être traité, par exemple, comme une extension de sa capacité principale (regroupement) et peut être traité comme un plugin natif. S'ils ne l'avaient pas fourni, quelqu'un d'autre l'aurait fait.
En regardant le plug-in natif ci-dessus, il apparaît que le regroupement ou la compilation de packs Web peut être décomposé en processus de regroupement principal, plus un grand nombre de processus de plug-in natifs que nous pouvons désactiver, personnaliser ou étendre. Cela signifiait permettre au code externe de se joindre au processus de regroupement à des points spécifiques parmi lesquels ils pouvaient choisir (appelés hooks).
Les plugins influencent donc la sortie et étendent la capacité du compilateur webpack.
Les chargeurs fonctionnent à niveau du fichier . Ils peuvent écrire un modèle, traiter du code pour le transpiler en fonction de votre convenance, etc.
Les plugins fonctionnent à niveau du système . Ils peuvent travailler sur les patterns, la gestion du système de fichiers (nom, chemin), etc.