Tutoriel Webpack 5 pour les débutants

14 février, 2022
DéveloppementJavascriptTutoriels

Webpack est un bundler JavaScript pour vos applications Web. Dans le passé, vous deviez lier manuellement les fichiers JavaScript dans les fichiers HTML. Aujourd’hui, Webpack 5 s’en occupe. Dans ce tutoriel, je veux vous guider à travers une configuration minimale de Webpack 5 pour une application JavaScript + HTML. Ensuite, vous devriez être en mesure d’étendre les fonctionnalités de Webpack, de faire évoluer votre application JavaScript ou de structurer vous-même le HTML de votre site Web.

Structure des fichiers et dossiers du projet

Nous allons commencer par créer un dossier. Ce dossier sera utilisé pour servir votre application à partir d’un serveur web local. Servir l’application permet de la visualiser dans le navigateur. Après tout, le dossier contiendra tout ce dont vous avez besoin pour publier votre application Web. Pour commencer, créez le dossier et un fichier HTML comme point d’entrée de votre application à partir du répertoire racine de votre projet en ligne de commande :

mkdir dist
mkdir src
touch dist/index.html
touch src/index.js

C’est à vous de nommer ce dossier. Vous le trouverez souvent nommé dist, public ou build. Vous pouvez également donner un nom au fichier HTML vous-même. Cependant, l’appeler index.html est une convention de nommage largement utilisée. Il est donc préférable de le garder ainsi pour l’instant. Comme prochaine étape, donnez au fichier dist/index.html créé le contenu suivant :

dist/index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Webpack</title>
  </head>
  <body>
    <div>
      <h1>Hello Webpack</h1>
    </div>
  </body>
</html>

Ce fichier contient tout le HTML nécessaire pour afficher votre site Web dans un navigateur. Aucun JavaScript n’est encore impliqué. Afin de vous permettre de commencer à utiliser JavaScript, placez le code suivant dans un fichier src/index.js :

src/index.js 
console.log('Projet Webpack!');

Vous devez créer votre package.json, pour ce faire vous devez taper la commande suivante afin de pouvoir générer votre fichier

npm init --yes

Vous devriez avoir un dossier dist/ et src/ ainsi que votre package.json pour votre projet :

- dist/
-- index.html
- src/
-- index.js
- package.json

Vous vous demandez peut-être pourquoi ne pas mettre tous les fichiers dans un seul dossier ? C’est parce que dans les étapes suivantes, nous allons nous assurer que tous les fichiers de votre code JavaScript du dossier src/ seront regroupés en un seul fichier JavaScript qui sera placé automatiquement dans le dossier dist/. En maintenant cette séparation des dossiers, vous pouvez être sûr que tout ce dont vous avez besoin pour mettre votre application en production sur un serveur Web se trouve dans le dossier dist/ et que tout ce dont vous avez besoin pour mettre en œuvre votre application se trouve dans le dossier src/.

L’approche la plus directe pour lier JavaScript à votre fichier HTML serait la suivante :

dist/index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Webpack</title>
  </head>
  <body>
    <div>
      <h1>Hello Webpack</h1>
    </div>
    <script src="../src/index.js"></script>
  </body>
</html>

Cependant, cela peut devenir une tâche fastidieuse au fil du temps, car vous devez garder la trace du JavaScript que vous liez à votre fichier HTML. C’est pourquoi nous utilisons Webpack pour générer un seul bundle JavaScript à partir de tout notre code source dans le dossier src/, qui sera ensuite automatiquement placé dans votre dossier dist/. Il pourra ensuite être utilisé dans notre fichier HTML d’entrée de la manière suivante :

dist/index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Webpack</title>
  </head>
  <body>
    <div>
      <h1>Hello Webpack</h1>
    </div>
    <script src="./bundle.js"></script>
  </body>
</html>

Par conséquent, nous devrons configurer Webpack pour regrouper notre code source à notre place. 

Configuration de Webpack 5

Webpack npm

Vous utiliserez Webpack pour empaqueter votre code source JavaScript, mais aussi pour ajouter des fonctionnalités avancées afin de construire votre projet avec des étapes de construction supplémentaires par la suite. En outre, vous utiliserez Webpack Dev Serveur pour servir votre projet dans un environnement local avec un serveur Web local à des fins de développement. Enfin, vous avez également besoin du CLI Webpack. Installons les trois dépendances en tant que bibliothèques (paquets node) en utilisant npm pour votre projet. À partir du répertoire racine de votre projet, tapez la commande suivante pour installer toutes les bibliothèques en tant que dépendances de développement :

npm install --save-dev webpack webpack-dev-server webpack-cli

Remarque : Les dépendances de développement (en abrégé : dev dependencies, indiquées par –save-dev) ne sont pas regroupées dans votre code de production par la suite. De cette façon, vous gardez le paquetage pour votre code de production léger. Par exemple, si vous voulez tester votre code source plus tard, vous pouvez le faire dans votre mode de développement local avec toutes les bibliothèques de test installées comme dépendances dev, mais plus tard ces bibliothèques ne seront pas incluses dans l’application réelle pour la production. Seules les dépendances permettant d’exécuter le code source sont nécessaires en tant que dépendances de production. Elles peuvent être installées sans l’option –save-dev.

Comme effet secondaire, vous devriez trouver un dossier node_modules/ avec toutes vos dépendances tierces. En général, vous n’avez pas besoin de vous en préoccuper. Les dépendances seront répertoriées dans le fichier package.json. Vérifiez-le vous-même pour voir les dépendances avec leurs numéros de version. À présent, la structure de votre dossier devrait ressembler à ce qui suit :

- dist/
-- index.html
- src/
-- index.js
- node_modules/
- package.json

Dans votre fichier package.json, ajouter le commande npm start pour utiliser Webpack Dev Server :

package.json 
{
  ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

Vous pouvez exécuter votre commande npm start pour compiler et lancer un serveur web local pour servir vos fichiers en mode développement. Pour l’instant, nous n’avons pas créer de fichier de configuration webpack donc vous n’arriverez pas à afficher votre index.html. Voyons comment nous pouvons regrouper nos fichiers de code source du dossier src/ dans le dossier dist/ avec Webpack et l’afficher via le serveur web de Webpack Dev Server. Pour cela, ajoutez l’ajout suivant à votre script npm start dans votre fichier package.json :

package.json 
{
  ...
  "scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  ...
}

Le script définit que vous voulez utiliser le serveur Webpack Dev avec un fichier de configuration appelé webpack.config.js. Créons le fichier webpack.config.js requis dans le répertoire racine de votre projet :

touch webpack.config.js

La structure de votre dossier devrait maintenant ressembler à ce qui suit :

- dist
-- index.html
- node_modules
- src
-- index.js
- package.json
- webpack.config.js

Terminez l’installation de Webpack en fournissant la configuration suivante pour le fichier webpack.config.js :

webpack.config.js 
module.exports = {
  // 1
  entry: './src/index.js',
  // 2
  output: {
    path: '/dist',
    filename: 'bundle.js'
  },
  // 3
  devServer: {
    static: './dist'
  }
};
Le fichier de configuration de Webpack donne les instructions suivantes :
  1. Utilisez le fichier src/index.js comme point d’entrée pour le regrouper. Si le fichier src/index.js importe d’autres fichiers JavaScript, regroupez-les également.
  2. Les fichiers de code source regroupés doivent donner lieu à un fichier bundle.js dans le dossier /dist.
  3. Le dossier /dist sera utilisé pour servir notre application au navigateur.
Afin d’être plus correct sur ces chemins à travers les systèmes d’exploitation, nous devons les résoudre correctement :
webpack.config.js 
const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: path.resolve(__dirname, './dist'),
  },
};

Vous devriez être en mesure de redémarrer le Webpack Dev Server. Auparavant, assurez-vous que votre dist/index.html inclut le fichier bundle.js généré comme indiqué précédemment.

Après avoir démarré l’application avec npm start, ouvrez l’application dans votre navigateur. Remarque : l’URL du navigateur doit également être visible sur la ligne de commande. 

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/

Une fois que vous avez ouvert votre application dans le navigateur, vous devriez être en mesure de voir la sortie de votre fichier dist/index.html et la compilation de votre fichier src/index.js. Si d’autres fichiers de code source JavaScript sont importés depuis le fichier src/index.js, ils seront également regroupés dans le bundle.js par Webpack.

Voir la suite : Comment configurer Babel

Ressources

Pensez à installer les dépendances en saisissant la commande npm install à la racine du projet

Code final

Tutoriel Webpack 5

Twitter Youtube
Nouveau Tutoriel

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.