Installazione Webpack e dipendenze

Installazione Webpack e dipendenze

Giuseppe Speranza Di Giuseppe Speranza


javascript webpack dipendenze

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 è il seguente: webpack_course_001

Ti ricordo 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, digito 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 HTML e stampa a video la frase: “Hello World”. 

Per questa mini serie il nostro progetto sarà interamente sviluppato con un solo script 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 ho usato Webpack perché ho creato manualmente il file index.html e ho 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. consideranche dopo aver spostato l’index.html nella cartella dist avremmo 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!

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