CONTATTACI

Blog

Installazione Webpack e dipendenze

Ricordiamo che la repository di quanto sviluppato può essere trovata al seguente link; inoltre, i branch saranno numerati in base alla lezione. Il branch relativo a quest’articolo è il seguente: webpack_course_001

Ti ricordiamo, inoltre, che puoi switchare nel branch relativo a quest’articolo con il comando: git checkout webpack_course_001

Ora siamo pronti per partiare con il secondo articolo su Webpack! 

Inizializzazione NPM e installazione Webpack

Dopo esser entrato nella cartella del progetto, digita npm init -y come nell’immagine qui di seguito:

[giuseppesperanza:~/wa/aulab/webpack]$ npm init -y

(il flag -y risponderà automaticamente Yes a tutte le domande poste da npm).

Una volta inizializzato NPM procediamo all’installazione di webpack e di webpack-cli, indispensabile per poter effettuare operazioni da linea di comando. Useremo il flag –save-dev per usarle come dipendenze di sviluppo,

npm install webpack webpack-cli --save-dev

se l’installazione ha avuto esito positivo, troveremo listati nella sezione devDependecies del package.json due pacchetti, come nell'immagine seguente:

"devDependencies": {
  "webpack": "^5.52.0",
  "webpack-cli": "^4.8.0"
}

Creiamo, ora, una cartella src che conterrà il codice sorgente e un file index.html che mostrerà i risultati.

La struttura delle cartelle dovrebbe essere la seguente:

  • NOME_PROGETTO
    • package.json
    • package-lock.json (è generato automaticamente dopo un’installazione npm)
    • .gitignore (creato per non committare dipendenze e cartelle inutili)
    • index.html
    • src/
      index.js

Il file index.js conterrà una funzione che crea un elemento del linguaggio HTML e stampa a video la frase: “Hello World”. 

Per questa mini serie, il nostro progetto sarà interamente sviluppato con un solo script del linguaggio Javascript e, successivamente, Typescript in cui creeremo degli elementi che inseriremo nel DOM.

Index.js

function drawComponent() {
  // crea un elemento HTML
  const element = document.createElement( tagName: 'div');

  // Aggiungo la scritta Hello World
  element.innerHTML = "Hello World";

  return element;
}

// "Appende" al body il ritorno della funzione drawComponent()

document.body.appendChild(drawComponent());

Il file index.html importerà l’index.js come un normale script.

Index.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>Corso Webpack Aulab</title>
   </head>
   <body>
       <script src="./src/index.js></script>
   </body>
<html>

Aprendo il file Index.html nel browser, potremo visualizzare la frase Hello World in alto a sinistra; tuttavia, in questo esempio, non abbiamo usato Webpack perché abbiamo creato manualmente il file index.html e abbiamo linkato, sempre manualmente, il file che contiene le logiche di progetto.

Cominciamo a fare le cose per bene 

Innanzitutto, separiamo il codice sorgente (src) dal codice di distribuzione (dist), che conterrà l’output finale del progetto modificando la struttura delle cartelle in questo modo:

  • NOME_PROGETTO
    • package.json
    • package-lock.json 
    • .gitignore 
    • dist/
      • index.html
    • src/
      • index.js

Creiamo, poi, il nostro entry point per webpack, scrivendo un comando nella sezione script del package.json.

"scripts": {
  "build": "webpack"
},

Infine, modifichiamo il file index.html aggiornando il path dello script dell’index.js. Considera che. dopo aver spostato l’index.html nella cartella dist. avremo un errore di puntamenti.

dist/index.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8" />
       <title>Corso Webpack Aulab</title>
   </head>
   <body>
       <script src="./main.js"></script>  <!-- Path aggiornato -->
   </body>
</html>

Ora basterà lanciare il comando Npm run build da linea di comando ed osservare la prima magia. Webpack creerà, automaticamente, un file chiamato main.js e lo piazzerà dentro la cartella dist, la stessa dove è presente il nostro index.html!

Se sei arrivato fin qui complimenti! Hai creato il tuo primissimo progetto Webpack senza gestire una configurazione particolare. Nelle prossime lezioni vedremo insieme come creare il file di configurazione detta webpack.config.js e lavoreremo con diverse ottimizzazioni di webpack, sfruttandolo in maniera adeguata! 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…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
Il mondo del web development è in continua evoluzione e, se da un lato può sembrare una corsa incessante, dall’altro rappresenta senz’altro un vortice di sfide e opportunità.  Come sviluppa…
Il mondo dello sviluppo backend è una parte cruciale di qualsiasi progetto web: definisce la logica che alimenta il lato “non visibile” di un sito o di un’applicazione. Si lega al frontend per mescol…
GitHub è da anni uno degli strumenti di condivisione del codice e versioning più utilizzati tra i web developers. Ad oggi, nel mondo del web development risulta essere uno strumento imprescindibile…

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 187 €/mese.

Esempio di finanziamento  

Importo finanziato: € 3990 in 24 rate da € 187 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 4572.88.

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.