Catégories
Astuces et Design

Comment regrouper un site statique simple à l'aide de Webpack

Webpack s'est imposé comme un élément indispensable de la chaîne d'outils JavaScript. Il compte plus de 55 000 étoiles sur GitHub et est utilisé par de nombreux grands acteurs du monde JavaScript, tels que React et Angular.

Cependant, vous n'avez pas besoin d'utiliser un framework frontal ou de travailler sur un projet à grande échelle pour en tirer parti. Webpack est avant tout un bundler, et en tant que tel, vous pouvez également l'utiliser pour regrouper à peu près n'importe quelle ressource ou actif auquel vous souhaitez penser.

Dans cet article, je vais vous montrer comment installer et configurer Webpack, puis l'utiliser pour créer des ensembles minifiés pour un site statique simple avec une poignée d'éléments.

Mais pourquoi tu veux faire ça?

Bonne question. Heureux que vous ayez demandé!

L'une des raisons pour cela est de minimiser le nombre de requêtes HTTP que vous faites au serveur. À mesure que la page Web moyenne grandit, vous incluerez probablement jQuery (oui, il est toujours populaire en 2020), quelques polices, quelques plugins, ainsi que diverses feuilles de style et certains JavaScript de votre choix. Si vous faites une demande réseau pour chacun de ces éléments, les choses s'additionnent rapidement et votre page peut devenir lente. Le regroupement de votre code peut contribuer à atténuer ce problème.

Webpack facilite également la réduction de votre code, réduisant encore sa taille, et vous permet d'écrire vos actifs dans la saveur que vous désirez. Par exemple, dans cet article, je vais vous montrer comment faire transpiler le JavaScript moderne de Webpack vers ES5. Cela signifie que vous pouvez écrire du JavaScript en utilisant la dernière syntaxe la plus à jour (bien que cela ne soit peut-être pas encore entièrement pris en charge), puis servir les navigateurs ES5 qui fonctionneront presque partout.

Et enfin, c'est un exercice d'apprentissage amusant. Que vous utilisiez ou non l'une de ces techniques dans vos propres projets, cela dépend de vous, mais en suivant, vous comprendrez parfaitement ce que fait le Webpack, comment il le fait et s'il vous convient.

Se lever et courir

La première chose dont vous aurez besoin est d'installer Node et npm sur votre ordinateur. Si vous n'avez pas encore Node, vous pouvez soit le télécharger à partir du site Web de Node, soit le télécharger et l'installer à l'aide d'un gestionnaire de version. Personnellement, je préfère de loin cette deuxième méthode, car elle vous permet de basculer entre plusieurs versions de Node et elle annule un tas d'erreurs d'autorisations, qui pourraient autrement vous voir installer des packages Node avec des droits d'administrateur.

Nous aurons également besoin d'un projet squelette avec lequel travailler. En voici un que j'ai créé plus tôt. Pour le faire fonctionner sur votre machine, vous devez cloner le projet à partir de GitHub et installer les dépendances:

git clone https://github.com/sitepoint-editors/webpack-static-site-example
cd webpack-static-site-example
npm install

Cela installera jQuery, ainsi que Slick Slider et Lightbox2 – deux plugins que nous utiliserons sur le site – sur un node_modules dossier à la racine du projet.

Après cela, vous pouvez ouvrir index.html dans votre navigateur et naviguez sur le site. Vous devriez voir quelque chose comme ceci:

Notre site statique

Si vous avez besoin d'aide pour l'une des étapes ci-dessus, pourquoi ne pas vous rendre sur nos forums et poster une question.

Présentation de Webpack au projet

La prochaine chose que nous devrons faire est d'installer Webpack. Nous pouvons le faire avec la commande suivante:

npm install webpack webpack-cli --save-dev

Cela installera webpack et la CLI webpack et les ajoutera au devDependency section de votre package.json fichier:

"devDependencies": {
  "webpack": "^5.1.3",
  "webpack-cli": "^4.0.0"
}

Ensuite, nous allons faire un dist dossier qui contiendra notre JavaScript fourni:

mkdir dist

Maintenant, nous pouvons essayer d'exécuter webpack à partir de la ligne de commande pour voir s'il est correctement configuré:

./node_modules/webpack/bin/webpack.js ./src/js/main.js --output-filename=bundle.js --mode=development

Ce que nous faisons ici, c'est dire à Webpack de regrouper le contenu de src/js/main.js dans dist/bundle.js. Si tout est installé correctement, vous devriez voir quelque chose comme cette sortie sur la ligne de commande:

asset bundle.js 1.04 KiB (emitted) (name: main)
./src/js/main.js 192 bytes (built) (code generated)
webpack 5.1.3 compiled successfully in 45 ms

Et webpack créera un bundle.js fichier dans le dist dossier. Si vous regardez ce fichier dans l'éditeur de texte de votre choix, vous verrez un tas de passe-partout et le contenu de main.js au fond.

Automatiser notre configuration

Si nous devions taper tout ce qui précède dans le terminal à chaque fois que nous voulions exécuter webpack, ce serait assez ennuyeux. Créons donc un script npm que nous pouvons exécuter à la place.

Dans package.json, modifiez le scripts propriété pour ressembler à ceci:

"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "build": "webpack ./src/js/main.js --output-filename=bundle.js --mode=development"
},

Notez comment nous pouvons omettre le chemin complet du module webpack, car lorsqu'il est exécuté à partir d'un script, npm recherchera automatiquement le module dans le node_modules dossier. Maintenant quand tu cours npm run build, la même chose devrait se produire comme avant. Cool, hein?

Créer un fichier de configuration Webpack

Remarquez comment nous transmettons le chemin du fichier à regrouper et le chemin du fichier de sortie comme arguments de Webpack? Eh bien, nous devrions probablement changer cela et les spécifier dans un fichier de configuration à la place. Cela nous facilitera la vie lorsque nous utiliserons des chargeurs plus tard.

Créer un webpack.config.js fichier à la racine du projet:

touch webpack.config.js

Et ajoutez le code suivant:

module.exports = {
  entry: './src/js/main.js',
  mode: 'development',
  output: {
	path: `${__dirname}/dist`,
	filename: 'bundle.js',
  },
};

Et modifiez le script npm comme suit:

"scripts": {
  ...
  "build": "webpack"
},

Dans webpack.config.js nous exportons un objet de configuration, qui spécifie le point d’entrée, le mode dans lequel le webpack doit s’exécuter (nous en reparlerons plus tard) et l’emplacement de sortie du bundle. Exécutez tout à nouveau et tout devrait toujours fonctionner comme avant.

Y compris le bundle

Maintenant que webpack génère un bundle pour nous, la prochaine chose que nous devons faire est de l'inclure quelque part. Mais d'abord, créons un point d'entrée différent, afin que nous puissions répertorier les éléments que nous voulons que Webpack regroupe pour nous. Ce sera un fichier nommé app.js dans le src/js annuaire:

touch src/js/app.js

Ajoutez ce qui suit à app.js:

require('./main.js');

Et changez la configuration du webpack ainsi:

entry: './src/js/app.js',

Courir npm run build à nouveau pour recréer le bundle. Tout devrait fonctionner comme avant.

Maintenant, si vous regardez index.html vous remarquerez qu'il ne se passe pas grand-chose en JavaScript. Au bas du fichier, nous incluons jQuery et un fichier appelé main.js, qui se charge d'afficher plus d'informations lorsque vous cliquez sur le Lire la suite… lien.

Modifions index.html pour inclure le bundle au lieu de main.js. Regardez au bas du fichier. Tu devrais voir:

    <script src="./node_modules/jquery/dist/jquery.min.js">script>
	<script src="./src/js/main.js">script>
  body>
html>

Remplacez ceci par:

    <script src="./node_modules/jquery/dist/jquery.min.js">script>
	<script src="./dist/bundle.js">script>
  body>
html>

Actualisez la page dans le navigateur et assurez-vous que le Lire la suite… le lien fonctionne toujours.

Regroupement de jQuery

Ensuite, ajoutons jQuery au bundle. Cela réduira le nombre de requêtes HTTP effectuées par la page. Pour ce faire, nous devons modifier le app.js fichier comme ça:

window.$ = require('jquery');
require('./main.js');

Ici, nous avons besoin de jQuery, mais comme nous l'avons installé à l'aide de npm, nous n'avons pas besoin d'inclure le chemin complet. Nous ajoutons également son habituel $ alias du global window objet, de sorte qu'il soit accessible par d'autres scripts. Nous exigeons main.js après jQuery, car le premier dépend du second, et l'ordre est important.

Modifier index.html pour supprimer la balise de script jQuery:

    <script src="./dist/bundle.js">script>
  body>
html>

Courir npm run build et encore une fois, actualisez la page dans le navigateur pour vous assurer que le Lire la suite… le lien fonctionne toujours. Cela fait? Bien!

Mesurer nos progrès

C'est bien beau de parler de performances, mais cela ne signifie pas grand-chose si vous n'établissez pas une sorte de métrique mesurable. Dans notre cas, nous essayons de réduire le nombre de requêtes HTTP effectuées par le navigateur et nous pouvons les afficher à partir des outils de développement du navigateur. J'utiliserai Chrome comme exemple de procédure, mais le principe est le même pour tous les navigateurs modernes.

appuie sur le F12 pour ouvrir les outils de développement, puis assurez-vous que le Réseau l'onglet est sélectionné. Ensuite, cliquez et maintenez le symbole de rechargement à côté de la barre d'adresse (le cercle avec une flèche) et sélectionnez Vider le cache et recharger dur. Vous devriez voir quelque chose de similaire à l'image ci-dessous.

Les outils de développement Chrome affichant le nombre de requêtes réseau

Comme vous pouvez le voir dans la barre en bas de la fenêtre, huit demandes sont en cours (nous en avons déjà réduit une en ajoutant jQuery à notre bundle) et un total de 557 Ko sont en cours de transfert sur le fil.

Regrouper le CSS

Regarder index.html, la seule autre chose pour laquelle nous faisons une demande réseau est le CSS. Comme vous pouvez le voir, nous incluons main.css en haut de la page, et ce fichier importe à son tour quatre autres fichiers CSS.

Bien que dans sa configuration standard, le webpack ne puisse traiter que JavaScript, nous pouvons également utiliser quelque chose appelé un chargeur pour qu'il intègre également notre CSS. À partir de la documentation Webpack:

Les chargeurs sont des transformations appliquées au code source d'un module. Ils vous permettent de pré-traiter les fichiers à mesure que vous import ou les «charger». Ainsi, les chargeurs sont un peu comme des «tâches» dans d'autres outils de construction et fournissent un moyen puissant de gérer les étapes de construction frontales. Les chargeurs peuvent transformer des fichiers d'un autre langage (comme TypeScript) en JavaScript ou charger des images intégrées en tant qu'URL de données. Les chargeurs vous permettent même de faire des choses comme import Fichiers CSS directement depuis vos modules JavaScript!

Alors changeons app.js:


require('../css/main.css');


window.$ = require('jquery');
require('./main.js');

Et nous devons changer webpack.config.js pour lui dire quel chargeur exécuter lorsqu'il rencontre un fichier se terminant par .css:

module.exports = {
  ...
  module: {
	rules: (
	  {
		test: /.css$/,
		use: (
		  'style-loader',
		  'css-loader',
		),
	  },
	),
  },
};

Comme vous pouvez le voir, j’ai spécifié deux chargeurs: css-loader et style-loader. Des deux, css-loader transforme le CSS en module JavaScript et style-loader injecte le CSS exporté par le module JavaScript dans un