Maison interface Web js tutoriel Comment comprendre le chargeur et le plugin dans Webpack

Comment comprendre le chargeur et le plugin dans Webpack

Sep 27, 2017 am 10:32 AM
plugin webpack

Les deux concepts de chargeur et de plugin dans webpack sont facilement confondus par les débutants. Ici, je vais parler brièvement de ma compréhension.

Pour le chargeur, c'est un convertisseur, qui compile un fichier A en fichier B. Ce qui est exploité ici, c'est le fichier, comme la conversion de A.scss ou A.less en B.css. , un simple processus de conversion de fichiers ;

Pour le plugin, c'est un extenseur, qui enrichit wepack lui-même. Pour l'ensemble du processus d'empaquetage du webpack, il n'exploite pas directement les fichiers, mais fonctionne basé sur le mécanisme d'événement écoutera certains nœuds dans le processus d'empaquetage du webpack, tels que

  • run:开始编译
    make:从entry开始递归分析依赖并对依赖进行build
    build-moodule:使用loader加载文件并build模块
    normal-module-loader:对loader加载的文件用acorn编译,生成抽象语法树AST
    program:开始对AST进行遍历,当遇到require时触发call
    require:事件
    seal:所有依赖build完成,开始对chunk进行优化(抽取公共模块、加hash等)
    optimize-chunk-assets:压缩代码
    emit:把各个chunk输出到结果文件
    Copier après la connexion
En surveillant les nœuds, nous pouvons trouver les nœuds appropriés pour traiter les fichiers de manière appropriée.


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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Tutoriel de démarrage VUE3 : empaquetage et création avec Webpack Tutoriel de démarrage VUE3 : empaquetage et création avec Webpack Jun 15, 2023 pm 06:17 PM

Vue est un excellent framework JavaScript qui peut nous aider à créer rapidement des applications Web interactives et efficaces. Vue3 est la dernière version de Vue, qui introduit de nombreuses nouvelles fonctionnalités et fonctionnalités. Webpack est actuellement l'un des packagers de modules et outils de construction JavaScript les plus populaires, qui peut nous aider à gérer diverses ressources dans nos projets. Cet article explique comment utiliser Webpack pour empaqueter et créer des applications Vue3. 1. Installez Webpack

Quelle est la différence entre vite et webpack Quelle est la différence entre vite et webpack Jan 11, 2023 pm 02:55 PM

Différences : 1. La vitesse de démarrage du serveur webpack est plus lente que celle de Vite ; car Vite n'a pas besoin d'être empaqueté au démarrage, il n'est pas nécessaire d'analyser les dépendances du module et de compiler, donc la vitesse de démarrage est très rapide. 2. La mise à jour à chaud de Vite est plus rapide que le webpack ; en termes de HRM de Vite, lorsque le contenu d'un certain module change, laissez simplement le navigateur demander à nouveau le module. 3. Vite utilise esbuild pour pré-construire les dépendances, tandis que webpack est basé sur le nœud. 4. L'écologie de Vite n'est pas aussi bonne que celle du webpack, et les chargeurs et plug-ins ne sont pas assez riches.

Comment utiliser PHP et Webpack pour le développement modulaire Comment utiliser PHP et Webpack pour le développement modulaire May 11, 2023 pm 03:52 PM

Avec le développement continu de la technologie de développement Web, la séparation front-end et back-end et le développement modulaire sont devenus une tendance répandue. PHP est un langage back-end couramment utilisé. Lors du développement modulaire, nous devons utiliser certains outils pour gérer et empaqueter les modules. Webpack est un outil d'empaquetage modulaire très facile à utiliser. Cet article explique comment utiliser PHP et Webpack pour le développement modulaire. 1. Qu'est-ce que le développement modulaire ? Le développement modulaire fait référence à la décomposition d'un programme en différents modules indépendants. Chaque module a sa propre fonction.

Comment Webpack convertit-il le module es6 en es5 ? Comment Webpack convertit-il le module es6 en es5 ? Oct 18, 2022 pm 03:48 PM

Méthode de configuration : 1. Utilisez la méthode d'importation pour placer le code ES6 dans le fichier de code js emballé ; 2. Utilisez l'outil npm pour installer l'outil babel-loader, la syntaxe est "npm install -D babel-loader @babel/core @babel/preset- env"; 3. Créez le fichier de configuration ".babelrc" de l'outil babel et définissez les règles de transcodage ; 4. Configurez les règles de packaging dans le fichier webpack.config.js.

Utilisez Spring Boot et Webpack pour créer des projets frontaux et des systèmes de plug-ins Utilisez Spring Boot et Webpack pour créer des projets frontaux et des systèmes de plug-ins Jun 22, 2023 am 09:13 AM

Alors que la complexité des applications Web modernes continue d’augmenter, la création d’excellents systèmes d’ingénierie frontale et de plug-ins devient de plus en plus importante. Avec la popularité de Spring Boot et Webpack, ils sont devenus une combinaison parfaite pour créer des projets frontaux et des systèmes de plug-ins. SpringBoot est un framework Java qui crée des applications Java avec des exigences de configuration minimales. Il fournit de nombreuses fonctionnalités utiles, telles que la configuration automatique, afin que les développeurs puissent créer et déployer des applications Web plus rapidement et plus facilement. W

Quel dossier est le plugin ? Quel dossier est le plugin ? May 05, 2023 pm 02:53 PM

Le plugin fait référence à un plug-in, qui est un programme écrit selon une certaine interface de programme d'application standard. Il ne peut s'exécuter que sur la plate-forme système spécifiée par le programme et ne peut pas s'exécuter indépendamment de la plate-forme spécifiée, car le plug-in en a besoin. pour appeler le système pur d'origine pour fournir une bibliothèque de fonctions ou des données.

Quels fichiers le package Vue Webpack peut-il contenir ? Quels fichiers le package Vue Webpack peut-il contenir ? Dec 20, 2022 pm 07:44 PM

En vue, webpack peut regrouper des fichiers js, css, images, json et autres dans des formats appropriés pour une utilisation par le navigateur. Dans webpack, js, css, images, json et d'autres types de fichiers peuvent être utilisés comme modules. Diverses ressources de module dans webpack peuvent être regroupées et fusionnées en un ou plusieurs packages, et pendant le processus de packaging, les ressources peuvent être traitées, comme la compression d'images, la conversion de scss en css, la conversion de la syntaxe ES6 en ES5, etc., qui peuvent être reconnu par le type de fichier HTML.

Qu'est-ce que Webpack ? Explication détaillée de son fonctionnement ? Qu'est-ce que Webpack ? Explication détaillée de son fonctionnement ? Oct 13, 2022 pm 07:36 PM

Webpack est un outil de packaging de modules. Il crée des modules pour différentes dépendances et les regroupe tous dans des fichiers de sortie gérables. Ceci est particulièrement utile pour les applications d'une seule page (le standard de facto pour les applications Web aujourd'hui).

See all articles