En savoir plus sur l'outil d'empaquetage de modules webpack

1. Qu'est-ce que webpack

1. Explication officielle

Essentiellement, webpack est un outil de packaging modulaire statique pour les applications JavaScript actuelles. (Cette phrase peut être résumée en deux points : modules et packaging )

Parlons des notions de modules et de packaging !

2. Modularisation front-end

• Quelques solutions pour la modularisation front-end : AMD, CMD, CommonJS, ES6 (les navigateurs ne peuvent pas les reconnaître , mais webpack peut être leur support sous-jacent avant de pouvoir réaliser un développement modulaire)
• Avant ES6 , si vous souhaitez modulariser Le développement nécessite l'aide d'autres outils pour que nous puissions réaliser un développement modulaire.
• Après
• avoir terminé le projet via le développement modulaire, nous devons également gérer diverses dépendances entre les modules et les intégrer et les empaqueter .
• cores est qu'il nous permet de réaliser un développement modulaire et nous aide à gérer les dépendances entre les modules.
• Non seulement les fichiers JavaScript , nos CSS , images , fichiers json , etc. peuvent tous être utilisés comme modules dans webpack.

3. Comment comprendre l’emballage ?

• Webpack peut nous aider à modulariser et à gérer diverses relations complexes entre les modules . Le concept d'emballage est facile à comprendre.
• Il s'agit de regrouper et de fusionner divers modules de ressources dans webpack en plusieurs packages (Bundle).
• Pendant le processus de packaging, les ressources peuvent également être traitées , comme la compression d'images, la conversion de scss en css et la conversion de la syntaxe ES6 en ES5, la conversion de TypeScript. à JavaScript et à d'autres opérations.
• Les outils d'empaquetage incluent grunt/gulp

Comparaison entre webpack et grunt/gulp

• Le cœur de grunt/gulp est Task.
  1. Vous pouvez configurer une série de tâches et définir les transactions à traiter par les tâches (telles que ES6, conversion ts, compression d'image, conversion scss en css)
  2. Laissez ensuite grunt/gulp exécuter ces tâches dans l'ordre et automatisez l'ensemble du processus

• pour voir une tâche gulp.
  1. La tâche suivante consiste à convertir tous les fichiers js sous src en syntaxe ES5.
  2. Et enfin, sortie dans le dossier dist.
  

• Quand utiliser grognement/gulp ?
  1. Les dépendances des modules du projet sont très simples et le concept de modularisation n'est même pas utilisé.
  2. Utilisez simplement grunt/gulp pour une fusion et une compression simples.
  3. Si l'ensemble du projet utilise une gestion modulaire et que l'interdépendance est très forte, on peut utiliser webpack.

• Quelle est la différence entre grognement/gulp et webpack ?
  1. Grunt/gulp met davantage l'accent sur l'automatisation des processus front-end, et la modularisation n'en est pas le cœur.
  2. Webpack met davantage l'accent sur la gestion du développement modulaire , et des fonctions telles que la compression, la fusion et le prétraitement de fichiers sont ses fonctions incluses.

2. Installation de webpack

( wepack doit s'appuyer sur l'environnement de nœud pour un fonctionnement normal, et l'environnement de nœud doit être. requis pour une exécution normale. Utilisez l'outil npm pour gérer divers packages dépendants dans le nœud.

• Par conséquent, pour installer webpack, vous devez d'abord installer Node.js fourni avec l'outil de gestion de packages npm
• pour installer webpack globalement (npm install webpack@. 3.6.0 -g) et
• pour installer webpck localement. (npm install [email protected] --save-dev) –save-dev est une dépendance de développement et n'a pas besoin d'être utilisée une fois le projet empaqueté.

3. Configuration du Webpack

1. Analyse des fichiers et des dossiers

• Dossier dist : utilisé pour stocker les fichiers emballés ultérieurement
• Dossier src : utilisé pour stocker les fichiers sources que nous avons écrits
  main.js : Le fichier d'entrée du projet.
  mathUtils.js : définit certaines fonctions d'outils mathématiques qui peuvent être référencées et utilisées ailleurs.
  index.html : Le navigateur ouvre la page d'accueil html affichée (référencé ici est le contenu du fichier package final dans src, c'est-à-dire le dossier dist ).
  package.json : généré via npm init, un fichier géré par le package npm.

Voici le code du fichier mathUtils.js et du fichier main.js : (spécification de modularisation CommonJS, CommonJS est la norme de modularisation, nodejs est l'implémentation de CommodJS (modularisation))

2. Commande

webpack ./src/main.js ./dist/bundle.js (emballez le fichier main.js dans un fichier bundle.js)

Description : De la même manière, vous pouvez également utiliser la spécification modulaire ES6

3. Créez un fichier webpack.config.js pour simplifier la commande packaging

(

mappez la commande packaging à packaging input et exit ).

Entry : Pour la

sortie d'entrée packagée : nous devons obtenir le chemin dans la

• sortie de sortie packagée de manière dynamique,
• afin de pouvoir utiliser la syntaxe Node.js pour importer un module. Ce module est le fichier entre guillemets de path (const path = require. ('chemin') Il doit être trouvé dans le package du nœud)
• Utilisez node.js via la commande npm init (initialisation)
• pour générer le fichier package.json (ce fichier décrit les informations du projet en cours) licence : "ISC" (open source pour le projet), ce qui suit est package.json

Description du code : Si vous souhaitez utiliser node, vous devez vous fier au fichier package.json

Après avoir exécuté npm install [email protected] --save-dev , les dépendances sont ajoutées comme suit

4. Mappage des commandes webpack à npm run

En plus de mapper webpack à l'entrée et à la sortie , vous pouvez également mapper les commandes webpack à npm run pour certaines opérations (doit être modifié dans la balise de script **"script"** dans le package. json). .

4. Utilisation du chargeur

1. Qu'est-ce que le chargeur ?

• Le chargeur est un concept essentiel dans webpack.

Pensons maintenant à quoi sert le webpack ?

• Nous utilisons principalement webpack pour traiter le code js, et webpack gérera automatiquement les dépendances liées à js
• . Cependant, pendant le développement, il n'est pas seulement traité par le code js de base, mais doit également charger du CSS, des images et du code avancé. convertissez ES6 en ES5, convertissez TypeScript en code ES5, convertissez scss et moins en css, convertissez les fichiers .jsx, .vue en fichiers js, etc.
• Pour les capacités de webpack lui-même, ces transformations ne sont pas prises en charge
• pour le moment, étendez simplement le chargeur correspondant à webpack

2. Processus d'utilisation du chargeur

1)

Travail de préparation pour le traitement du fichier css :

1. Dans le répertoire src, créez un fichier css. , créez-y un fichier normal.css

2. Réorganisez la structure des répertoires du fichier et placez les fichiers js dispersés dans un dossier js

3. Le code dans normal.css est très simple, c'est-à-dire définissez le corps en rouge

4. Mais le style dans normal.css ne prendra pas effet pour le moment, car il n'est pas référencé, et webpack ne peut pas le trouver, car nous n'avons qu'une seule entrée, et webpack recherchera d'autres fichiers dépendants à partir de l'entrée.

5. A ce moment il faut le référencer dans main.js, le fichier d'entrée

Après cela, nous devons importer le chargeur correspondant pour l'utiliser !

• Étape 1 : Installez le chargeur que vous devez utiliser via npm
  (npm install --save-dev css-loader) (npm install --save-dev style-loader)
  Sur le site officiel de webpack, recherchez la méthode suivante d'utilisation du chargeur pour les styles :
  
  

• Étape 2 : Créez des instructions de configuration sous le mot-clé modules dans webpack.config.js

 : css-loader est uniquement responsable du chargement des fichiers CSS et n'est pas responsable de l'intégration de styles CSS spécifiques dans les documents.

Pour le moment, nous avons également besoin d'un style-. le chargeur nous aide à traiter

Remarque : style-loader doit être placé devant css-loader.

2) Étape 1 du traitement du fichier Less

• : Installez le chargeur correspondant (remarque : less est également installé ici, car webpack utilisera less pour compiler le fichier less). Commande : npm install --save-dev less-loader less

• Étape 2 : Modifiez le fichier de configuration correspondant (dans webpack.config.js) et ajoutez une option de règles pour le traitement des fichiers .less. comme suit:

3) Traitement du fichier image

• étape 1 : Ajouter deux images au projet (l'une fait moins de 8ko, l'autre est supérieure à 8ko)

• étape 2 : pensez d'abord à référencer l'image dans le style css, comme suit

  

• Étape 3 : Modifiez le fichier de configuration correspondant (dans webpack.config.js) et ajoutez une option de règles pour le traitement des fichiers image. comme suit:

  

• Étape 4 : Une erreur a été trouvée après l'empaquetage, car les images de plus de 8 Ko seront traitées via file-loader , mais il n'y a pas de chargeur de fichiers dans notre projet. (Vous devez installer file-loader , commande npm install --save-dev file-loader) Après l'installation et l'empaquetage, vous constaterez qu'il y a un fichier image supplémentaire dans le dossier dist.

  

Description :

• Nous avons constaté que Webpack générait automatiquement un nom très long pour nous

  1. Il s'agit d'une valeur de hachage de 32 bits pour éviter la duplication de nom.
  2. Cependant, dans le développement réel, il peut y avoir certaines exigences concernant le nom de l'image empaquetée

• . Par conséquent, nous pouvons ajouter les options suivantes dans les options :

  1. img : le dossier dans lequel le fichier doit être empaqueté.
  2. nom : obtenez le nom original de l'image et placez-le à cet endroit
  3. Hash8 : Afin d'éviter les conflits de noms d'image, le hachage est toujours utilisé, mais seuls 8 bits sont conservés.
  4. ext : utilisez l'extension d'origine de l'image comme suit :
  

• Vous devez également configurer et modifier le chemin utilisé par l'image ultérieurement

  1. Par défaut, webpack renverra le chemin généré à l'utilisateur.
  2. Cependant, l'intégralité du programme est regroupée dans le dossier dist, vous devez donc ici ajouter un autre dist/ au chemin.
  comme suit:
  

En résumé, après emballage, le fichier image ressemble à ceci

4), ES6 à ES5 bébé

5. Configurez Vue dans webpack

• Étape 1 : Commande d'exécution du terminal (npm install --save vue)

• Étape 2 : Importez Vue dans main.js (importez Vue depuis 'vue') comme suit

• Étape 3 : Accrochez p sur l'instance de vue dans index.html, comme suit

• Étape 4 : Une erreur est trouvée après l'empaquetage. Nous devons spécifier que la vue que nous utilisons est la version du compilateur d'exécution .

Opérations spécifiques : vous devez ajouter une résolution au webpack et prendre un alias ( alias ), comme suit :

6. Utilisation de Vue dans webpack

Étape 1 : accrochez p sur l'instance de vue dans index.html

Étape 2 : importez le composant APP dans le fichier main.js , enregistrez l'APP dans l'instance Vue et utilisez le composant APP dans le modèle Vue ( composantisation )

Étape 3 : Créez le fichier APP.vue et séparez le modèle de la page vue du code js et du code css , comme suit

Étape 4 : Configurez le chargeur de vue correspondant,

Modifiez le fichier de configuration de webpack.config.js :

7. Utilisation du plugin

1. Comprendre le plugin

• Qu'est-ce qu'un plugin ?
  1. Plugin signifie plug-in, qui est généralement utilisé pour étendre une architecture existante.
  2. Les plug-ins du webpack sont diverses extensions des fonctions existantes du webpack, telles que l'optimisation du packaging, la compression de fichiers, etc.
• La différence entre le chargeur et le plugin
  1. Loader est principalement utilisé pour convertir certains types de modules. Il s'agit d'un convertisseur.
  2. Le plugin est un plug-in, qui est une extension du webpack lui-même et
• le processus d'utilisation d'un plugin d'extension.
  1. Étape 1 : L'installation via npm nécessite l'utilisation de plugins (certains plugins déjà intégrés au webpack n'ont pas besoin d'être installés)
  2. Étape 2 : Configurez le plug-in dans les plugins dans webpack.config.js

2. Webpack -Ajouter des informations de copyright Utilisation du plugin

3. Packager le plugin HTML

4.Plug-in de compression js

8. Construire un serveur local

• .Webpack fournit un serveur de développement local en option. Ce serveur local est construit sur la base de node.js et utilise le cadre express en interne. Il peut réaliser ce que nous voulons en permettant au navigateur d' actualiser et d'afficher automatiquement les résultats modifiés. .

• Cependant, il s'agit d'un module distinct. Vous devez l'installer avant de l'utiliser dans webpck. Commande : (npm install --save-dev [email protected])

• devserver est également une option dans webpack . peut être défini comme la propriété suivante :
  1. contentBase : quel dossier fournit les services locaux. La valeur par défaut est le dossier racine. Nous devons remplir ./dist ici.
  2. port : numéro de port
  3. inline : actualisation de la page en temps réel
  4. historyApiFallback : Dans la page SPA, la

• configuration du fichier webpack.config.js en mode historique qui s'appuie sur HTML5 est modifiée comme suit :
  

• Le paramètre –open signifie ouvrir le navigateur directement

De plus,

ci-dessous, nous souhaitons séparer les fichiers de configuration du webpack : c'est-à-dire séparer les éléments nécessaires au développement et les éléments utilisés pour la publication ( compilation ). comme suit:

9. Vue CLI

1. Que signifie CLI ?

• Il s'agit d'une interface de ligne de commande, traduite par interface de ligne de commande, mais communément appelée échafaudage.
• Vue CLI est un échafaudage de projet vue.js officiellement publié.
• En utilisant vue-cli, vous pouvez rapidement créer un environnement de développement Vue et la configuration Webpack correspondante

. . Conditions préalables à l'utilisation de Vue CLI - Node (Node doit être installé)

Cependant, pour utiliser Node, npm doit être impliqué.

Qu'est-ce que NPM ?

• Le nom complet de NPM est Node Package Manager
• , qui est un outil de gestion et de distribution de packages NodeJS. Il est devenu une norme non officielle pour la publication de modules Node (packages)
• . NPM est souvent utilisé pour installer certains packages dépendants pendant le processus de développement.

3. Utilisez Vue CLI pour

• installer Vue scaffolding

npm install -g @vue/cli

Remarque : la version installée ci-dessus est la version Vue CLI3 Si vous souhaitez initialiser le projet selon la méthode Vue CLI2, il n'est pas possible

• d'initialiser. le projet Vue CLI2

vue init webpack mon -projet