Référence: Principe du
Webpack Articles d'interview frontale-Webpack
1. Quelle est la configuration générale lors de l'utilisation de webpack?
webpack est un processeur de module statique. Lorsqu'il traite une application, il crée de manière récursive un graphe de dépendances , qui contient chaque module requis par l'application, puis regroupe tous ces modules dans un ou plusieurs packages
2. Le processus d'emballage à l'aide de webpack
- Initialisation : démarrer la construction, lire et fusionner les paramètres, charger le plugin, instancier le complicateur
- Compiler : à partir de Entry, appelez le chargeur correspondant en série pour chaque module afin de traduire le contenu du fichier, puis recherchez le module dont dépend le module et compilez-le de manière récursive.
- Sortie : combinez le module compilé en un bloc, convertissez le bloc en un fichier et exportez-le dans le système de fichiers
3. Chargeur couramment utilisé
- file-loader: exporte le fichier dans un dossier et référence le fichier de sortie par URL relative dans le code
- source-map-loader: chargez des fichiers source supplémentaires pour faciliter le débogage des points d'arrêt
- image-loader: charger et compresser des fichiers image
- babel-loader: convertir ES6 en ES5
- css-loader: charge le CSS, prend en charge la modularisation, la compression, l'importation de fichiers et d'autres fonctionnalités
- eslint-loader: vérifiez le code JavaScript via ESLint
4. Plugins couramment utilisés
- define-plugin: définir des variables d'environnement
- commons-chunk-plugin: extraire le code commun
- uglifyjs-webpack-plugin: Compressez le code ES6 via UglifyES
5. La différence entre le chargeur et le plugin
- Les deux visent à étendre les fonctionnalités de webpack. Loader se concentre uniquement sur le domaine de la transformation, complète la compression, l'empaquetage et la traduction de la langue; tandis que le plugin n'est pas seulement limité à l'empaquetage, au chargement des ressources, mais aussi à l'optimisation et à la compression d'empaquetage, à la redéfinition des variables d'environnement, etc.
- Loader s'exécute avant le fichier packagé (loader est le fichier prétraité lorsque le module est chargé); les plugins fonctionnent tout au long du cycle de compilation
- La responsabilité d'un chargeur est unique et une seule conversion doit être effectuée. Un chargeur est en fait un module Node.js. Lorsque plusieurs chargeurs doivent être appelés pour convertir un fichier, chaque chargeur s'exécutera dans une séquence chaînée
- De nombreux événements seront diffusés pendant le cycle de vie de l'exécution de webpack. Le plugin écoutera ces événements et changera les résultats de sortie via l'API fournie par webpack au bon moment.
6 、 webpack ， gulp 和 grognement
grunt et gulp sont basés sur des tâches et des flux (Task, Stream), trouver un fichier (ou un type), faire une série d'opérations en chaîne dessus, mettre à jour les données sur le flux, toute l'opération de la chaîne constitue une tâche, multiple Les tâches constituent l'ensemble du processus de construction Web.
Du point de vue des idées de construction, gulp et grunt obligent les développeurs à diviser l'ensemble du processus de construction front-end en plusieurs tâches et à contrôler raisonnablement la relation d'appel de toutes les tâches; Webpack oblige les développeurs à trouver l'entrée et doivent savoir quoi utiliser pour différentes ressources Quel type d'analyse et de traitement fait Loader