Comment changer l’adresse IP pour accéder au serveur de développement de webpack-dev-server

C’est quoi le webpack ?

Webpack est un groupeur de modules (module bundler) JavaScript open-source . Il est principalement conçu pour JavaScript, mais il peut transformer les assets front-end tels que HTML, CSS et images si les loaders correspondants sont inclus.  webpack prend des modules avec des dépendances et génère des assets statiques représentant ces modules.

webpack-dev-server can be used to quickly develop an application. En d’autres termes, le webpack-dev-server fournit un serveur de développement qui va permettre un rechargement automatique (live) du navigateur à chaque fois qu’il y a une modification qui fait sur une code source. C’est très pratique quand vous faites du développement.

Pour le cas de smart-tech.mg, nous utilisons le webpack-dev-server pour nos développement des applciations web avec VueJS (vous pouvez le voir dans notre article qui en parle).

Comment changer l’adresse IP pour accéder au serveur de développement de webpack-dev-server ?

Pour ce faire, il faut modifier l’adresse du serveur qui héberge le webpack-dev-server.

En effet, par défaut, quand vous accéder au serveur de développement de webpack-dev-server (en exécutant la commande npm run dev), on utilise toujours localhost. Mais quand le serveur se trouve sur un autre serveur (quand vous utilisez par exemple docker), vous ne pouvez plus y accéder.

Pour modifier l’adresse alors, il faut modifier le ficher webpack.config.js.

Rechercher ensuite la ligne, devServer.

A l’interieur de devServer, ajouter la ligne host: '0.0.0.0' si vous voulez permettre à tous les machines d’accéder à votre serveur ou host:'10.0.0.1' si vous voulez permettre à une machine spécifique d’y accéder.

Vous pouvez aussi modifier le port en ajoutant le code port : 8080.