Lorsque l’on développe un projet avec webpack
, on est amené à lancer un watcher qui surveille les modifications apportées à un fichier, souvent javascript
, et qui lance une recompilation en mode développement. Pour un projet utilisant l’éditeur par blocs Gutenberg de WordPress, on lance npm run start
dans le répertoire du projet. Webpack
surveille alors tout changement en écoutant un port sur le serveur.
Une adresse IP
Internet Protocol possède 65535 ports dédiés à recevoir les informations venant d’autres adresses IP
. Les ports d’écoute des serveurs sont comme les fréquences d’une radio. Chaque station émet sur une fréquence particulière. Les serveurs font la même chose, ils écoutent sur un port ~ fréquence ~ particulier.
Cette erreur peut apparaître lorsque le processus précédemment lancé a généré une erreur ou s’est arrêté improprement.
1 2 3 4 5 6 7 8 9 10 11 |
xavier@machine:/path/to/project$ npm run start > project@1.0.0 start /path/to/project > wp-scripts start webpack is watching the files… Live Reload disabled: listen EADDRINUSE: address already in use :::35081 Hash: d50ed95ffb8da5a85808 Version: webpack 4.44.2 Time: 6518ms |
Pour résoudre ce problème, le processus précédent, écoutant ce port, doit être tué. Le processus webpack
aura pour origine une commande node
.
On cherche d’abord le PID
Process Identification du processus :
1 2 3 |
xavier@machine:/path/to/project$ lsof -i COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME node 21492 xavier 20u IPv6 24056159 0t0 TCP *:35081 (LISTEN) |
On tue alors le processus en utilisant le PID
:
1 |
xavier@machine:/path/to/project$ kill -9 21492 |
Et on relance le watcher webpack
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
xavier@machine:/path/to/project$ npm run start > project@1.0.0 start /path/to/project > wp-scripts start webpack is watching the files… Live Reload listening on port 35081 Hash: 6a625ed6d4e773728188 Version: webpack 4.44.2 Time: 6562ms Built at: 10/25/2020 10:15:25 PM Asset Size Chunks Chunk Names index.asset.php 191 bytes index [emitted] index index.js 1.01 MiB index [emitted] index index.js.map 1.21 MiB index [emitted] [dev] index Entrypoint index = index.js index.js.map index.asset.php ... |
Et hop, le watcher est relancé, le projet recompile à chaque changement et sauvegarde. Le développement peut continuer.