Webpack 4: Video Tutorials

Webpack 4: Video Tutorials 2020-01-05T01:39:55+00:00

COS’È WEBPACK?

Webpack è un “module bundler” ed è utilizzato, dietro le quinte, dalla maggior parte delle CLI (Command Line Interface) dei più famosi framework e librerie fronte-end, come ad es. Angular, React o Vue, per gestire gli import di file Javascript ES6/7/8, compilare Typescript o SASS, gestire assets (images, fonts, …), avviare un webserver con live reload, supportare il lazy loading di moduli e per creare, infine, il bundle statico da utilizzare per il deploy.

Negli ultimi anni, WebPack ha (quasi) totalmente rimpiazzato strumenti come GULP o GRUNT, famosi e utilissimi “task runner” utilizzati nel mondo JS (quello che è rappresenta ANT nel mondo Java, tanto per fare un parallelismo) e, di conseguenza, è ormai considerato uno strumento di fondamentale importanza nello sviluppo di Single Page Application.

In questa breve serie di video, quindi, troverete un’introduzione su WebPack, non solo per comprenderne le fondamenta ma anche per creare progetti in “puro Typescript”, senza l’ausilio di framework e librerie addizionali.

Iscriviti al mio canale YouTube

Introduzione al corso

Quali argomenti sono descritti in questo mini corso su WebPack, perché l’ho registrato, cosa saprete fare al termine del mini corso, link utili…

Webpack 4: introduzione

Webpack è un module bundler ed è utilizzato nelle più famose CLI (AngularCLI, CreateReactApp, Vue CLI, …) per la compilazione del codice ES6, Typescript, SASS, per creare un pacchetto (bundle) minificato adatto al deploy, avviare un webserver con live reload e molte altre operazioni che in passato avrebbero richiesto un task runner.

Installazione dipendenze

In questo video creeremo un semplice progetto HTML / Javascript e installeremo le dipendenze necessarie: WebPack e WebPack CLI.

Il file di configurazione

Webpack richiede un file di configurazione, webpack.config.js, tramite il quale è possibile definire tutte le impostazioni di questo strumento: loader, plugin, definire la cartella in cui creare la build, suddividere il bundle in vari chunk, …

Webpack Loader

Per determinare quali tipologie di file saranno supportate e le modalità con cui dovranno essere trattati, Webpack utilizza il concetto di loader.
In questo video analizzeremo il supporto ai file CSS ma sono disponibili loader per gestire un’infinità di formati: JS, TS, JSON, Immagini, CSS, SASS, Markdown e così via.

Multiple Bundle

In questo video analizzeremo le funzionalità di Webpack per compilare e suddividere il progetto in diversi bundle.

Introduzione ai Plugins

Webpack è ricco di plugin che ne estendono le funzionalità.
Nel video ne utilizzeremo alcuni, come HTMLWebPackPlugin, per generare automaticamente i tag < script > nel file index.html del progetto e CleanWebpackPlugin, per cancellare e ripulire il contenuto della cartella che contiene la build dopo ogni compilazione.

Debug e Source Map

Le build generate da Webpack sono versioni spesso ottimizzate e compresse del nostro codice sorgente.

Le source maps rappresentano una sorta di mappa che mettono in relazione il codice sorgente con quello compilato, indispensabili in fase di sviluppo perché  agevolano le procedure di debug all’interno del browser in cui stiamo provando l’applicazione.

Compilazione & Watch

Tramite l’opzione –watch  sarà possibile ricompilare automaticamente il codice dopo ogni modifica, evitando, quindi, di dover effettuare questa operazione manualmente.

Configurare un WebServer

Durante la fase di sviluppo possiamo configurare ed installare un web server che aprirà automaticamente la nostra applicazione nel browser all’avvio del progetto e che 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.

Supportare Typescript

In questo video introdurremo il supporto a Typescript tramite l’installazione del compilatore e dell’apposito loader per Webpack, creeremo quindi il file tsconfig.json di configurazione e scriveremo codice tipizzato.

Iscriviti al mio canale YouTube