Introduction à WebPack 4

Qu'est-ce que webpack ?
Pour faire simple c'est un système de construction (build) de fichiers web utilisables par les navigateurs.

Les applications web sont devenues de plus en plus sophistiquées, c'est pourquoi il est maintenant nécessaire avec du javascript de morceler le code afin qu'il soit maintenable et réutilisable. Le seul problème à cette procédure c'est que les navigateurs web ne supporte pas cette façon d'organiser les fichiers, c'est la que webpack entre en jeu.

webpack

Installation des outils de base

Pour utiliser webpack, il faut installer node.js qui est le "runtime" de webpack. Node.js permet d’exécuter du javascipt sur une machine sans navigateur web.

 Télécharger nodejs

On va installer Visual Studio Code qui est un éditeur de texte avancé, pour le confort.

 Télécharger VSC

Installation de webpack

Deux solutions:

  • Directement via le powershell
  • Par le terminal intégré de Visual studio Code (Menu Afficher > terminal)

Visual Studio Code

Après avoir créer un dossier pour le projet mcarnet-vue par exemple, on initialise npm.

npm init -y

-y pour le fichier de conf par défaut.

Ensuite on installe webpack 4 avec la commande suivante :

npm i --D webpack webpack-cli

Utilisation de webpack

Dans VSC il faut créer un sous répertoire nommé src où se trouvera tous nos fichiers sources dont un fichier index.js par défaut (il est possible de changer le nom dans le package.json).

Puis exécuter enfin webpack avec la commande suivante:

./node_modules/.bin/webpack

Il est possible de rendre les commandes de build plus simples en modifiant le package.json :

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "release": "webpack --mode=production",
    "debug": "webpack --mode=development"
  },

Pour pouvoir ensuite entrer cette commande pour le mode debug: 

npm run debug

Et celle-ci pour le mode production : 

npm run release

A la suite de ça, un dossier dist sera créé avec les fichiers compilés et lisibles par un navigateur. :-)


Écrire un commentaire

@

Quelle est la deuxième lettre du mot upmr ? :