Raccolta di laboratori per imparare e sperimemintare l'utilizzo di webpack 5, descritti e commentati in italiano.
ATTENZIONE: le versioni di webpack e di altre librerie utilizzate in questo progetto potrebbero essere versioni ALFA o BETA ( ovvero versioni di pacchetti in versioni [Pre-release],cioè non ancora ufficialmente rilasciati ) quindi possono mostrare instabilità o altri problemi, in alcuni casi occorre ricorrere a workaround per fare funzionare gli esperimenti compresi nei laboratori; si sconsiglia l'utlizzo di questo repo a chi non è espressamente interessato alla sperimentazione di webpack5 e si rimanda a ita-webpack4-labs per laboratori basati su versioni stabili di webpack e relative librerie, plugins, loaders, etc..
ATTENZIONE: questo repository non contiene codice o artefatti pronti per applicazioni o sistemi in produzione, il codice che trovi in questo repository è pensato solamente per esperimenti a finalità di apprendimento ( Experiments for Learning. )
Ogni labotatorio nasce per comprendere come sfruttare le potenzialità , talvota nascoste, che si possono avere impostando correttamente la fase di build di un website o di una web app o di una desktop app ( electron) ed è mirato a pochi specifici aspetti, quindi è ideale come base di partenza per esperimenti più complessi.
Come indice per accedere ai risultati generati nei diversi laboratori è stata predisposta la pagina
index.html nella <project-home> (cartella home in cui è presente il clone del progetto).
in qualche modo modo occorre "servirla" ed "aprirla", per esempio:
$ cd <project-home>
$ python -m SimpleHTTPServer
$ open localhost:8000Vediamo come si procede per creare , compilare e provare e documentare un nuovo esempio...
- scarica i sorgenti con il comando:
git clone https://github.com/rondinif/ita-webpack5-labs.git - entra nella cartella del progetto:
cd ita-webpack5-labs - apri con l'editor o la tua IDE preferita; per esempio:
code . - installa le dipendenze e prendi confidenza con questo progetto:
- la cartella
./distancora non esiste oppure è vuota
- la cartella
./dist è la cartella di destinazione dei pacchetti che generiamo in fase di build pertanto è intenzionalmente voluto che essa inizialmente non esista ( o possa essere vuota ), notare che la cartella ./dist è stata esclusa dai files tracciati dal versionamento dei sorgenti fatto da git ( controlla nel contenuto del file .gitignore).
Il contenuto della ./dist viene generato durante la fase di build.
Prima di eseguire la "build" dobbamo avere installato le dipendenze con i comandi yarn oppure npm install.
ATTENZIONE:
gli esperimenti che necessitano di webpack-dev-server"
non funzionavano con webapack 5:
vedere: scripts/FixWebpackServerError.md ed applicare workaround dopo avere installato le dipendenze come sopra descritto.
A seconda delle tue preferenze puoi scegliere tra yarn o npm ma in seguito dovrai continuare ad usare sempre lo stesso per questo progetto; solo a titolo informativo si rende noto che la creazione di questo progetto è stata originariamente realizzata con npm versione 6.13.0.
Come probabilmente già saprai l'operazione di installazione delle dipenze provvede alla creazione e popolamento della cartella ./node_modules , la quale, coma la ./dist, viene esclusa dal git nel .gitignore e in ogni momento può essere rimossa integralmente rm -rf ./node_modules e rigenerata reinstallando le dipendenze.
Gli esempi contenuti in diversi laboratori ( quasi tutti ad esclusione di alcuni ) possono essere buildati massivamente con un unico *task:
npm run build
In alternativa potrebbe essere preferibile compilare solo quelli che interessano o che si intende provare ed approfondire, per fare questo usare un comando del tipo: npm run <build-nome-esempio>
, per esempio:
npm run build-lab-07
Questo compilerà solo l'esempio contenuto nel laboratorio sette, il cui risultato consiste nell'impacchettare ( creare i bundles ) in ./dist/lab-07 che , in questo caso, comprende una pagina html autogenerata dal plugin html-webpack-plugin e il bundles compilati dal webpack partendo dal sorgete Javascrit presente in un paio di files nella cartell .src/lab-07
E' stato previsto in file ./index.html che può essere considerato l'indice di tutti gli esempi e serve per navigare i vari output generati dalla build , ovvero vedere l'output della build eseguito sul runtime del tuo web-browser.
Alcuni esperimenti ad esempio quelli della lab-10 e guida-11 richiedo passaggi specifici, entrando nella sottocartella relativa all'esperimento, per esempio: src/lab-10 troverai adeguate istruzioni nella guida specifica: src/lab-10/README-lab-10.md
Vediamo quali esperimenti possiamo condurre nei laboratori inclusi in questo repo:
lab-01-ounbouldled rappresenta un punto base di partenza "vanilla" ,ancora non impacchettato, ( buldled ) dal webpack. Nella lab-01 ripartiamo dallo stesso punto di partenza ed impariamo ad impacchettarlo.
Sperimentiamo la gestione degli asset associati ai compoments che potremo sviluppare.
Si usa la parola component quando si parla di views, templates, modules, etc.
Con la parola asset si intendono css, images, fonts o anche file di dati che possiamo decidere se associare ai components o considerare globali per tutto il progetto.
i laboratori compresi tra lab-02 e lab-05 si inspirano al capitolo asset-management della guida ufficiale.
i laboratori lab-06, lab-07 e lab-08 ontengono esempi che si inspirano al capitolo output-management della guida ufficiale.
i laboratori lab-09, lab-10 e lab-11 contengono esempi che si inspirano al capitolo development della guida ufficiale.
Le tue idee sono importanti, non perdere l'occasione per fornire il tuo speciale contributo a questo repo.
Simply we encourage contributions from everyone , especially you.
MIT