Tips : comment éviter les chemins relatifs avec Webpack

Les liens relatifs ne sont pas une fatalité ! Ensemble, apprenons à lutter contre eux efficacement grace à Webpack !

Webpack c'est quoi ?

En quelques mots, Webpack est un module bundler, c'est-à-dire un outil qui vous permet de construire des modules composés de plusieurs types de fichiers (js, Css, Png, …) et de les importer directement depuis votre Javascript. Il s'utilise généralement conjointement avec un Task-runner ou directement depuis NodeJs pour une application Express par exemple.

Si vous ne connaissez ni Webpack ni ce qu'est un task Runner, je vous encourage très sérieusement à vous plonger sur ce sujet qui est un incontournable dans le développement et l'intégration web actuelle.

Un peu de contexte

Il y a quelques jours en me baladant sur le net je suis tombe sur une ressource intéressante, un dashboard d'administration fait avec Vue js, et je pensais en faire une présentation pour l'article d'aujourd'hui.

Pour préparer l'article j'ai évidemment commencé à lire le code source de la ressource et je suis tombé sur quelque chose que je vois souvent dans les applications Vues js et de manière générale les applications Webpack et qui m'énervent grandement :

Les liens relatifs ont certes leur utilité, mais ce n'est pas une raison pour les utiliser pour absolument tout, surtout que Webpack propose une solution très simple pour remplacer cela : les alias.

Webpack et les alias

Cette solution peut se trouver dans la section "resolve" de la documentation Webpack, et sert a creer des 'root' a partir desquels vos chemins pourront demarrrer. La syntaxe est tres simple : 

  resolve: {
    alias: {
      '+': path.resolve('./node_modules'),
      '@': path.resolve('./src/renderer/components')
   },

Avec cet exemple, nous pourrions par exemple écrire import myComponent from '@/myComponent' (pour du Javascript evidemment, je vous laisse adapter la syntaxe pour du Sass).

Je pense (et j'espère) que ce petit tip ne servira pas à beaucoup d'entre vous, qui le connaissent et l'utilise déjà. Néanmoins, je pense qu'il était important de faire cet article pour les autres.

Ces liens relatifs ne sont pas une fatalité, vous pouvez y faire quelque chose !