Guide du débutant de Webpack –

De nos jours, nous sommes obligés d'utiliser de nombreux outils d'accessoires pour faciliter, accélérer et optimiser notre flux de travail de développement web. Cependant, ces outils ajoutent souvent une couche supplémentaire de complexité à la pile. En conséquence, nous devons utiliser plus de temps et d’efforts pour apprendre, comprendre et utiliser ces outils correctement. Il en va de même pour webpack .

Lors de la première utilisation de webpack, il peut être difficile de comprendre son fonctionnement et son utilisation. Bien que la documentation soit bonne, elle peut être décourageante pour les novices et sa courbe d'apprentissage est abrupte. Cependant, Webpack vaut la peine d'être appris et peut vous faire économiser beaucoup de temps et d'efforts à long terme. Dans ce tutoriel, je présenterai tous les concepts de base pour vous aider à démarrer.

Remarque: dans ce tutoriel, j'ai utilisé Webpack 4.30

SitePoint Premium fournit une collection complète de livres couvrant l'essentiel pour les développeurs, comme Pug. , Gulp, Git et plus. Inscrivez-vous maintenant .

Qu'est-ce que Webpack?

En tant que cœur, webpack est un bundler de modules statiques. Dans un projet particulier, Webpack traite tous les fichiers et tous les actifs en tant que modules. Sous le capot, il repose sur un graphique de dépendance. Un graphe de dépendances décrit la manière dont les modules se lient les uns aux autres à l'aide des références ( instructions require et import ) entre les fichiers. De cette manière, Webpack parcourt tous les modules de manière statique pour créer le graphique et l'utilise pour générer un seul ensemble (un ou plusieurs ensembles) – un fichier JavaScript contenant le code de tous les modules combinés dans le bon ordre. "Statiquement" signifie que, lorsque Webpack crée son graphe de dépendances, il n'exécute pas le code source, mais assemble les modules et leurs dépendances dans un ensemble. Ceci peut ensuite être inclus dans vos fichiers HTML.

Maintenant, pour développer l'aperçu sommaire ci-dessus, explorons les principaux concepts utilisés par Webpack.

Webpack Main Concepts

Webpack contient quelques concepts principaux que nous devons comprendre clairement avant de creuser dans sa mise en œuvre pratique. Examinons-les un à un:

• Entrée. Le point d'entrée est le module utilisé par Webpack pour créer son graphe de dépendance interne. De là, il détermine les autres modules et les bibliothèques que point d'entrée dépend (directement ou indirectement) et les inclut dans le graphique jusqu'à ce qu'il ne reste dépendant. Par défaut, la propriété d'entrée est définie sur ./ src / index.js mais vous pouvez spécifier un module différent (voire plusieurs modules) dans le fichier de configuration de Webpack.

• Sortie. La propriété de sortie indique à Webpack où émettre le (s) paquet (s) et quel nom utiliser pour ce (s) fichier (s). La valeur par défaut de cette propriété est ./ dist / main.js pour le bundle principal et ./ dist pour les autres fichiers générés, tels que les images. Bien sûr, nous pouvons spécifier des valeurs différentes dans la configuration en fonction de nos besoins.

• chargeurs. Par défaut, Webpack ne comprend que les fichiers JavaScript et JSON. Pour traiter d'autres types de fichiers et les convertir en modules valides, Webpack utilise des chargeurs. Les chargeurs transforment le code source des modules non JavaScript, nous permettant ainsi de prétraiter ces fichiers avant qu'ils ne soient ajoutés au graphique de dépendance. Par exemple, un chargeur peut transformer des fichiers d'un langage CoffeeScript en JavaScript ou des images insérées en URL de données. Avec chargeurs, nous pouvons même importer des fichiers CSS directement à partir de nos modules JavaScript. Plugins

• . Les plugins sont utilisés pour toute autre tâche que les chargeurs ne peuvent pas faire. Ils nous fournissent un large éventail de solutions concernant la gestion des actifs, la minimisation et l'optimisation des ensembles, etc.

• Mode. Généralement, lorsque nous développons notre application, nous utilisons deux types de code source: un pour la génération de développement et un pour la génération de production. Webpack nous permet de définir celui que nous voulons produire en modifiant le paramètre mode en development production ou aucune . Cela permet à Webpack d'utiliser les optimisations intégrées correspondant à chaque environnement. La valeur par défaut est production . Le mode none signifie qu’aucune option d’optimisation par défaut n’est utilisée. Pour en savoir plus sur les options utilisées par webpack en mode de développement et consultez la page de configuration du mode .

Fonctionnement de Webpack

Dans cette section nous examinerons le fonctionnement du webpack. Même un simple projet contient des fichiers HTML, CSS et JavaScript. En outre, il peut contenir des éléments tels que des polices, des images, etc. Ainsi, un flux de travail webpack typique comprendrait la configuration d'un fichier index.html avec les liens CSS et JS appropriés et les ressources nécessaires. De plus, si vous avez plusieurs modules CSS et JS qui dépendent les uns des autres, ils doivent être optimisés et correctement combinés dans une unité prête à être produite.

Pour faire tout cela, webpack repose sur la configuration. Bien que webpack 4 soit livré avec des valeurs par défaut raisonnables, vous devez fournir un fichier de configuration spécial webpack.config.js pour tout projet non trivial, qui décrit comment les fichiers et les éléments doivent être transformés, ainsi la sortie doit être générée. Ce fichier peut rapidement devenir assez monolithique, ce qui rend difficile de comprendre comment webpack fait son travail à moins que vous connaissez les principaux concepts de son travail.

Sur la base de la configuration fournie, webpack commence à partir des points d'entrée et résout chaque module rencontré lors de la construction du graphe de dépendance. Si un module contient des dépendances, le processus est exécuté récursivement pour chaque dépendance jusqu'à la fin de la traversée. Ensuite, webpack regroupe tous les modules du projet dans un petit nombre d'ensembles – en général un seul – à charger par le navigateur.

Getting Started

Remarque: vous pouvez trouver les fichiers de notre projet dans le . ] GitHub repo .

Maintenant que nous disposons de bases théoriques solides, mettons-les en pratique.

Pour commencer, nous allons créer un nouveau répertoire et y basculer. Ensuite, nous allons initialiser un nouveau projet:

 mkdir learn-webpack
cd learn-webpack
npm init -y

Ensuite, nous devons installer Webpack et l'interface Web CLI localement:

 npm installer Webpack webpack-cli --save-dev

Maintenant, le contenu du package généré.json devrait être similaire à celui-ci:

 {
  "name": "learn_webpack",
  "version": "1.0.0",
  "la description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo " Erreur: aucun test spécifié  "&& exit 1"
  },
  "keywords": [],
  "auteur": "",
  "licence": "ISC",
  "devDependencies": {
    "webpack": "^ 4.30.0",
    "webpack-cli": "^ 3.3.0"
  }
}

Outre le regroupement de modules, WebPack peut être utilisé comme un simple gestionnaire de tâches. Nous pouvons créer des tâches webpack en incluant le nom de notre tâche suivi de ses instructions dans la section scripts du paquet fichier json . Essayons ceci maintenant. Ouvrez package.json et modifiez l'objet de scripts comme suit:

 "scripts": {
  "test": "echo " Erreur: aucun test spécifié  "&& exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},

Dans la propriété scripts webpack permet de référencer les packages npm installés localement par leur nom. Nous utilisons cela et le drapeau - mode pour définir dev et tâches de construction qui exécuteront Webpack en développement ( npm run dev ) et le mode production ( npm run build ) respectivement

Avant de tester les tâches que nous venons de créer, créons un répertoire src et insérons un index . js dans un fichier contenant console.log ("Hello webpack"); . Nous pouvons maintenant déjà exécuter la tâche dev pour démarrer Webpack en mode développement:

 $ npm run dev

> learn_webpack@1.0.0 dev C:  Utilisateurs  Utilisateur  Webpack  apprendre_webpack
> webpack - développement en mode

Hachage: 5bb3bdc1efd7b7f4b627
Version: webpack 4.30.0
Temps: 226ms
Construit à: 2019-04-16 17:48:32
  Taille de l'actif Chunks Noms de chunk
main.js 3.8 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 27 octets {principal} [built]

Génial! Cela fonctionne comme prévu. Mais pour vérifier que nous obtenons le bon résultat, nous devons afficher le résultat dans le navigateur. Pour ce faire, créons un fichier index.html dans le répertoire dist :

Maintenant, si nous ouvrons le fichier dans le navigateur, nous devrions voir le message Hello webpack sur la console.

Jusqu'ici, tout va bien. Mais écrire notre fichier index.html manuellement peut être problématique dans certains cas. Par exemple, si nous changeons le nom de notre point d'entrée, le paquet généré sera renommé, mais notre fichier index.html fera toujours référence à l'ancien nom. Nous devons donc mettre à jour notre fichier HTML manuellement chaque fois que nous renommons un point d’entrée ou en ajoutons un nouveau. Heureusement, nous pouvons facilement résoudre ce problème avec le html-webpack-plugin . Installons-le maintenant:

 npm install html-webpack-plugin --save-dev

À ce stade, pour activer le plug-in, nous devons créer un fichier webpack.config.js dans le répertoire racine avec le contenu suivant:

 const HtmlWebpackPlugin = require (" html-webpack-plugin ");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack Output",
    }),
  ],
};

Comme vous pouvez le constater, pour activer un plugin Webpack, nous devons l'inclure puis l'ajouter au tableau plugins . Si nécessaire, nous transmettons également des options au plug-in.

Lançons notre compilation maintenant pour voir ce qui va se passer:

 $ npm run build

> learn_webpack@1.0.0 construire C:  Users  User  Webpack  learn_webpack
> webpack - production en mode

Hash: e56a796f5ccfebcc8270
Version: webpack 4.30.0
Temps: 1088ms
Construit à: 2019-04-16 20:44:47
    Taille de l'actif Chunks Noms de chunk
index.html 183 octets [emitted]
  main.js 956 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js 27 octets {0} [built]
Child html-webpack-plugin pour "index.html":
    1 atout
    Entrypoint undefined = index.html
    [2] (webpack) /buildin/global.js 472 octets {0} [built]
    [3]  (webpack) /buildin/module.js 497 octets {0} [built]
        + 2 modules cachés

Ouvrons le index.html . Comme nous pouvons le constater, le plug-in crée automatiquement un fichier index.html mis à jour qui utilise l'option title de la configuration:

Développons maintenant notre projet et spécifions des noms personnalisés pour les propriétés de sortie et . Dans webpack.config.js nous ajoutons ce qui suit avant la propriété plugins :

: './src/app.js',
sortie: {
  nom de fichier: '[name] .bundle.js',
  path: path.resolve (__ dirname, 'dist')
},

Nous allons maintenant créer un fichier src / composant.js :

 export default (text = "Hello webpack") => {
  élément const = document.createElement ("p");

  element.innerHTML = text;

  élément de retour;
};

Ensuite, nous renommons index.js en app.js pour refléter nos modifications et échangeons le contenu de celui-ci contre le suivant:

 composant d'importation importé de "./component" ;

document.body.appendChild (composant ());

Lançons maintenant WebPack en mode production:

 $ npm run build

> learn_webpack@1.0.0 construire C:  Users  User  Webpack  learn_webpack
> webpack - production en mode

Hachage: 9f78936f8a2a21061f0b
Version: webpack 4.30.0
Temps: 1689ms
Construit à: 2019-04-17 23:43:40
        Taille de l'actif Chunks Noms de chunk
    index.html 190 octets [emitted]
main.bundle.js 1.04 KiB 0 [emitted] main
Entrypoint main = main.bundle.js
[0] ./src/app.js + 1 modules 227 octets {0} [built]
    | ./src/app.js 79 octets [built]
    | ./src/component.js 148 octets [built]
Child html-webpack-plugin pour "index.html":
    1 atout
    Entrypoint undefined = index.html
    [2] (webpack) /buildin/global.js 472 octets {0} [built]
    [3]  (webpack) /buildin/module.js 497 octets {0} [built]
        + 2 modules cachés

Voyons maintenant et clarifions les informations tirées de la sortie du webpack. En commençant par le haut, nous voyons le hachage de la construction, la version de Webpack et le temps nécessaire à l'exécution de la construction. Ensuite, nous voyons les fichiers générés dans le répertoire dist ( index.html et main.bundle.js ). En dessous d'eux, nous voyons le module d'entrée ( app.js ) et sa dépendance ( composant.js ). La sortie après Child html-webpack-plugin pour "index.html": est liée au travail interne du html-webpack-plugin et peut être ignorée en toute sécurité. [19659007] Donc, maintenant, dans le dossier dist nous avons le fichier de paquet nouvellement généré main.bundle.js . Si nous ouvrons index.html dans le navigateur, nous devrions voir Hello webpack s'afficher sur la page. De même, si nous vérifions la source de index.html nous verrons que la valeur de la propriété src dans l'étiquette du script est mise à jour à . ] main.bundle.js .

Utilisation de scripts

Dans cette section, nous allons découvrir comment ES6 peut être transpilé en un code compatible ES5 qui fonctionne dans tous les navigateurs. Commençons par l’exécution de la commande suivante:

 npm run dev - --devtools false

Maintenant, ouvrons le main.bundle.js :

 / *** / "./src/component.js":
/ *! ***************************! * *
  ! *** ./src/component.js ***!
   *************************** /
/ *! exportations fournies: valeur par défaut * /
/ *** / (fonction (module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require __. r (__ webpack_exports__);
/ * Default harmonie exportation * / __webpack_exports __ ["default"] = ((text = "Bonjour webpack") => {
  élément const = document.createElement ("p");

  element.innerHTML = text;

  élément de retour;
});

/ *** /})

Comme vous pouvez le constater, les fonctionnalités modernes de l'ES6 (la fonction flèche et la déclaration const ) du module composant.js ne sont pas transformées en code compatible ES5 par défaut. Pour que notre code fonctionne dans les anciens navigateurs, nous devons ajouter le chargeur Babel:

 npm installer babel-loader @ babel / core @ babel / preset-env --save-dev

Ensuite, dans webpack.config.js ajouter le module après la propriété sortie :

 module: {
  règles: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
},

Lorsque nous définissons des règles pour un chargeur de paquet Web, il convient généralement de définir trois propriétés principales:

• test qui décrit le type de fichiers à transformer.
• exclude qui définit les fichiers qui ne doivent pas être traités à partir du ou des chargeurs, le cas échéant.
• utilise qui indique le ou les chargeurs à utiliser avec les modules correspondants.

Exécutez la commande suivante. à nouveau:

 npm run dev - --devtools false

Cette fois, le code dans main.bundle.js est compilé:

 / *** / "./src/component.js":
/ *! ***************************! * *
  ! *** ./src/component.js ***!
   *************************** /
/ *! exportations fournies: valeur par défaut * /
/ *** / (fonction (module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require __. r (__ webpack_exports__);
/ * harmon export par défaut * / __webpack_exports __ ["default"] = (function () {
  var text = arguments.length> 0 && arguments [0]! == undefined? arguments [0]: "Bonjour le webpack";
  var element = document.createElement ("p");
  element.innerHTML = text;
  élément de retour;
});

/ *** /})

Parfait. Nous pouvons maintenant utiliser les fonctionnalités modernes de JS et webpack transformera notre code afin qu'il puisse être exécuté par les anciens navigateurs.

Utilisation des styles

Dans cette section, nous verrons comment ajouter des styles à notre projet. . Pour ce faire, nous devons installer deux chargeurs:

 NPM installer le style-loader-loader --save css-dev

css-loader analyse le code CSS en JavaScript et résout les dépendances, style-loader génère notre code CSS dans une balise