Que fait Webpack et comment l'utiliser pour mon site Web?
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.
Sommaire
À 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 vite 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 require()
fonction pour inclure un fichier JavaScript dans un autre. Ce n'est pris en charge dans aucun navigateur, car il s'agit d'un élément qui doit être exécuté par un bundler JavaScript tel que Webpack, Gulp ou Browserify avant de l'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 require
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 file-loader
pour gérer les images:
{ test: /.(png|jpe?g|gif)$/, use: ( { loader: 'file-loader', options: {}, }, ), }
Si le regex dans test
correspond au nom du fichier, le chargeur est utilisé. Dans ce cas, file-loader
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 |_components/ | |_styles/ | | |_buttonStyles.css | |_button.js |_containers/ | |_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, SASS 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 bien 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 le TypeScript de Microsoft. 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. Il s’agit en fait d’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 des CSS et JavaScript vanille, vous n'êtes pas obligé d'utiliser de préprocesseurs, mais pour ceux qui souhaitent utiliser la syntaxe vanille nouvelle génération, nous vous recommandons au moins d'installer Babel pour prendre en charge ES2015 et versions ultérieures. Cela vous permettra d'utiliser les fonctionnalités ES2015 comme import
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 install 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 existe de nombreuses options à utiliser, et la configuration variera en fonction de ce pour quoi vous utilisez 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 webpack-dev-server
, qui se reconstruira automatiquement lorsque des modifications sont apportées.