Webpack est un utilitaire qui peut regrouper vos fichiers JavaScript. Cela vous permet d'être plus organisé et plus productif, et permet également l'utilisation de langages pré-traités comme SASS et TypeScript.

À quoi sert Webpack?

Imaginez que vous travaillez sur un site Web avec beaucoup de JavaScript personnalisé. Vous travaillez sur ce projet depuis un certain temps et les choses sont rapidement devenues incontrôlables. Votre index.html a 20 différents balise tous les différents fichiers de source; certains sont les vôtres, d'autres sont des ressources externes dont vous dépendez. Les gérer est une douleur, en particulier à cause de la façon dont la plupart des navigateurs gèrent le chargement de JavaScript. Comment vous assurez-vous que votre code est exécuté après le chargement de jQuery? Habituellement, vous placez simplement jQuery physiquement en premier dans le HTML, mais c'est difficile à gérer pour de nombreuses divergences.

Il y a aussi la question des performances. Chaque fichier de script doit être chargé séparément. Et pour aggraver les choses, la plupart du JavaScript bloque le rendu, ce qui signifie que votre site Web ne s'affichera même pas tant qu'il n'aura pas fini de télécharger, d'analyser et d'exécuter le JavaScript. Vous pouvez voir cela en action sous l'onglet Réseau des outils de développement de Chrome, qui affiche les demandes envoyées. Plus vous faites de demandes, plus elles peuvent mettre du temps à se terminer.

La solution ici est regroupement. Au lieu de créer des liens vers des ressources externes, vous les téléchargez toutes localement et les incluez en tant que dépendances de votre code. Webpack regroupe tout cela en un seul main.js fichier contenant tout ce dont votre site a besoin. Vous devez alors simplement inclure ce fichier JavaScript et vous débarrasser de tous les autres Mots clés.

Cela vous permet de diviser le code en plusieurs fichiers sans avoir à vous soucier des problèmes de concurrence, des problèmes d'espace de noms ou des temps de chargement du site. Webpack compresse et réduit également le code de production pour économiser encore plus d'espace.

Webpack vous aide à organiser les actifs de votre site

En bref, Webpack vous permet d'utiliser le exiger() fonction pour inclure un fichier JavaScript dans un autre. Cette fonctionnalité n'est prise en charge dans aucun navigateur, car elle doit être exécutée par un bundler JavaScript tel que Webpack, Gorgée, ou Naviguer avant d'envoyer au client. Cela peut être quelque chose de simple, comme importer une dépendance depuis npm:

var axios = require ('axios') //node_modules/axios/index.js

Ou quelque chose de plus compliqué, comme utiliser des images en JavaScript:

Dans les deux cas, la chaîne du exiger La fonction est transmise aux chargeurs Webpack. C'est ce qui définit la manière dont Webpack traite les fichiers. Par exemple, nous pourrions utiliser chargeur de fichiers pour gérer les images:

{
  test: /.(png|jpe?g|gif)$/,
  utilisation: (
    {
      chargeur: 'file-loader',
      options: {},
    },
  ),
}

Si le regex dans tester correspond au nom de fichier, le chargeur est utilisé. Dans ce cas, chargeur de fichiers générerait une URL en fonction de votre configuration en fonction de l'endroit où ce fichier s'est retrouvé. Maintenant, lorsque nous construisons nos fichiers, le img la balise ressemblerait plus à:

Cela vous permet d'avoir une structure de fichiers très organisée, car vous n'avez plus à vous soucier de l'emplacement des fichiers et d'en ajouter d'autres et Mots clés. Il n’est pas rare, en particulier avec des frameworks comme React, d’avoir des projets qui ressemblent à ceci:

src /
  | _ styles /
  | | _global.css
  | | _darkTheme.css
  | _composants /
  | | _ styles /
  | | | _buttonStyles.css
  | | _button.js
  | _conteneurs /
  | | _homepage.js
  | | _users.js
  | _index.js
  | _app.js
  | _package.json

Au lieu d'avoir une ligne de 2000 index.js. Cela rend le développement beaucoup plus facile à long terme, avec un peu de temps au début de la transition vers un environnement basé sur Webpack.

Webpack vous permet d'utiliser des préprocesseurs

Comme Webpack ne fait que transmettre le traitement des fichiers aux chargeurs, beaucoup de magie peut se produire dans ces chargeurs. Vous vous retrouvez avec ce qu'on appelle un préprocesseur, qui peut ajouter des fonctionnalités à la langue dans laquelle vous travaillez.

Par exemple, TOUPET est un préprocesseur pour CSS, ajoutant la prise en charge des variables, l'imbrication, les mélanges, l'importation et l'héritage, et un plein d'autres choses. C'est génial, et la meilleure partie est qu'il est entièrement compatible avec les CSS classiques, vous n'avez donc pas à vous soucier de la prise en charge du navigateur. L'utilisateur final ne sait jamais que vous avez utilisé SASS pour créer votre site, car vous transformez le code SASS en code CSS lorsque vous le regroupez avec webpack.

Un autre langage prétraité utile est celui de Microsoft Manuscrit. TypeScript est un sur-ensemble syntaxique de JavaScript - ce qui signifie que tout le code JavaScript est du code TypeScript valide - et il ajoute la prise en charge des types stricts, transformant JavaScript en un langage fortement typé comme les variantes C. C’est en fait un langage compilé, utilisant le tsc utilitaire, mais le ts-loader L'extension Webpack en ajoute le support. Le chargeur compilera votre .ts fichiers dans .js des dossiers.

Si vous êtes déjà satisfait du CSS et du JavaScript vanilla, vous n'êtes pas obligé d'utiliser de préprocesseurs, mais pour ceux qui souhaitent utiliser la syntaxe vanilla de nouvelle génération, nous vous recommandons au moins d'installer Babel pour prendre en charge ES2015 et au-dessus. Cela vous permettra d'utiliser les fonctionnalités ES2015 comme importer et les fonctions fléchées.

Comment configurer Webpack

Tout d'abord, vous devez avoir installé Node pour pouvoir exécuter JavaScript en dehors du navigateur. Ensuite, vous pouvez installer Webpack à partir de Node Package Manager (npm). Exécutez ces commandes à partir de la racine de votre dossier de projet:

npm init -y
npm install webpack --save-dev
npm installer webpack-cli --save-dev

Cela crée un nouveau package.json qui suit les packages que vous avez installés. Vous devriez voir un nouveau dossier appelé node_modules.

Webpack est maintenant installé et vous pouvez l'exécuter avec:

npx webpack

Cela suppose que le point d'entrée de votre projet est ./src/index, et que vous souhaitez que le fichier groupé entre dist / main.js. Si vous souhaitez configurer votre configuration différemment ou configurer des chargeurs, vous devrez créer un fichier de configuration. Il y a beaucoup d'options à utiliser, et la configuration variera en fonction de l'utilisation de Webpack, mais la plupart du temps, le fichier de configuration sera placé à la racine de votre projet en tant que webpack.config.js. Vous devrez le charger avec le --config drapeau, mais vous pouvez automatiser cela en spécifiant un script dans package.json:

"scripts": {
"build": "webpack --config webpack.config.js"
}

Maintenant, chaque fois que vous exécutez:

npm run build

Webpack exécutera et regroupera votre projet.

Si vous souhaitez ne pas avoir à courir "npm run build"Après chaque modification que vous apportez, vous devez installer serveur webpack-dev, qui se reconstruira automatiquement lorsque des modifications sont apportées.