Come sempre, prima di iniziare, ti ricordiamo che la repository di quanto sviluppato puoi 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.
Puoi verificare il tutto consultando la documentazione ufficiale.
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!
