Qu'est-ce que le webpack ? A quoi ça sert ?

Qu'est-ce que le webpack ? A quoi sert le webpack ? Cet article vous présentera la signification de webpack et comment utiliser webpack. Les amis dans le besoin peuvent y jeter un œil. J'espère qu'il vous sera utile.

Sans plus tard, allons droit au but~

Qu'est-ce que le webpack ?

Nous pouvons le savoir sur le site officiel : Essentiellement, webpack est un bundler de modules statiques (module bundler) pour les applications JavaScript modernes. 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.

Pour faire simple, WebPack peut être considéré comme un packager de modules : il analyse la structure de votre projet et trouve des modules JavaScript et d'autres langages d'extension​​que les navigateurs ne peuvent pas exécuter directement (Scss, TypeScript , etc.) et conditionnez-le dans un format adapté à la consommation du navigateur.

Alors jetons un coup d'oeil A quoi sert le webpack ?

Parlons d'abord brièvement du principe de fonctionnement de webpack :

Dans un fichier de configuration, des tâches telles que la compilation, la compression et la combinaison de certains fichiers sont spécifiées. Traitez votre projet dans son ensemble, via un fichier principal donné (index.js), webpack partira de ce fichier pour trouver tous les fichiers de dépendances de votre projet, utilisera des chargeurs pour les traiter, et enfin le conditionnera dans un navigateur capable de reconnaître c'est un fichier js.

Le concept de webpack est que tout est modulaire. Mettez un tas de fichiers css et js dans un fichier d'entrée général, introduisez-les via require, et webpack gérera le reste, y compris les dépendances avant et arrière de. tous les modules. Relation, packaging, compression, fusion dans un fichier js, extraction du code public dans un fichier js et packaging séparé de certains js auto-spécifiés, le module peut être css/js/imsge/font, etc.

Examinons l'utilisation de webpack en détail

1 Webpack peut générer du HTML basé sur le modèle et gérer automatiquement le chemin de référence CSS/js ci-dessus

2. peut traiter automatiquement le chemin de l'image dans , le chemin de l'image d'arrière-plan en CSS et la référence de la police

3 Webpack peut ouvrir le serveur local et mettre automatiquement à jour le contenu de la page tout en réécrivant le code

4, webpack peut compiler jsx es6 sass moins coffescript, etc., et ajouter md5, sourcemap et autres assistances

5. webpack peut charger le contenu de manière asynchrone, sans se charger dans le DOM lorsqu'il n'est pas nécessaire

.

6. webpack peut coopérer avec le développement de frameworks tels que vue.js et réagis.js.

Cet article se termine ici. Pour plus de connaissances sur webpack, vous pouvez suivre le site php chinois ! ! !

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!