CONTATTACI

Blog

Compilazione con Watch e Web server locale

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!

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.