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!
