Compilazione con Watch e Web server locale

Compilazione con Watch e Web server locale

Giuseppe Speranza Di Giuseppe Speranza


webpack build watch

Come sempre, prima di iniziare, vi ricordo che la repository di tutto quello sviluppato potete trovarla al seguente link, inoltre i branch saranno numerati in base alla lezione. Il branch relativo a quest’articolo è webpack course 006.  

Puoi switchare nel branch relativo a quest’articolo con il comando: git checkout webpack_course_006

Che cos'è la modalità Watch

Finora, per poter testare ogni singola modifica apportata ai file sorgente, era necessario generare una nuova build con il comando npm run build, che ormai tutti conosciamo; questo processo è ovviamente molto scomodo in fase di sviluppo. 

Generare una build per testare ogni modica è impensabile, quindi per ovviare a questa inconvenienza, Webpack ci fornisce la modalità Watch. Questa modalità "osserva" tutti i file che costituiscono il grafo delle dipendenze, nominato nei vecchi articoli, e non appena uno di loro subisce delle modifiche, Webpack ricompila tutto il progetto.

Per poter usufruire di questa modalità basta definire un nuovo script nel package.json che chiameremo watch.

"scripts": {
  "build": "webpack --config webpack.config.js",
  "watch": "webpack --config webpack.config.js --watch"
},

A questo punto se si digita npm run watch nel terminale, potrai notare che Webpack non esce dal processo ma resta sempre in "ascolto" reagendo ad ogni modifica di un file.

Per provare questa funzionalità procedi nel seguente modo:

  • modifica un qualsiasi file;
  • salva;
  • vai nel browser;
  • ricarica la pagina.

Potrai vedere la modifica apportata senza aver generato nessuna nuova build. Tuttavia rimane ancora un elemento negativo.

Il dover ricaricare la pagina non è ancora ottimale come soluzione.

Dev-server locale

Per questo motivo Webpack ci fornisce la possibilità di usare un dev-server locale, che aprirà automaticamente la nostra applicazione nel browser e fornirà la funzionalità di live-reload, ovvero, ad ogni modifica del codice, non solo il progetto sarà ricompilato ma il nostro browser si aggiornerà automaticamente senza necessità di refresh manuale della pagina.

Per la documentazione ufficiale, potete consultare il seguente link.

Come usare il dev-server

Per usarlo è necessario prima di tutto installarlo come dipendenza di sviluppo con il seguente comando:

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

Dopodichè bisogna aggiungere nel webpack.config una nuova proprietà che dirà al dev-server da dove partire:

devServer: {
  static: './dist',
},

Come ultimo step aggiungiamo nella sezione scripts del package.json il comando per avviarlo:

"serve": "webpack-dev-server --open"

Ora digitando npm run serve nel terminale, Webpack aprirà automaticamente una nuova finestra nel browser che punta al nostro localhost sulla porta 8080, la quale è configurabile a nostro piacimento.

Una piccola nota interessante è che il dev-server non scrive nulla in output, ossia non crea nessun file che viene costantemente aggiornato, ma tiene tutto in memoria e ogni volta che avviene una modifica serve direttamente i file aggiornati da questo spazio. 

Come configurare Webpack dev-server

Il webpack-dev-server può essere configurato anche manualmente, usando webpack-dev-middleware; così facendo si ha anche la possibilità di usare i middleware. I middleware sono delle funzioni che scattano in specifici punti da noi definiti, possono essere davvero utili in fase di sviluppo. Per ulteriori approfondimenti potete consulatre il link alla documentazione ufficiale.

Nel prossimo articolo vedremo come supportare il celeberrimo Typescript. 

Stay Tuned e alla prossima lezione!

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo