К содержанию

Tutorial za Webpack 5

Razumljiv tutorial za webpack bundler sa teorijom i zadacima za početnike.

Osnove

Princip rada sakupljača Webpack

Problem sa kešom u pretraživačima

Webpack preko ES modula u Webpack

Instaliranje Webpack-a

Početno podešavanje build alata Webpack

Podešavanje pokretanja Webpack build-a

Testna izrada putem Webpack-a

Povezivanje bundla sa markup-om u Webpack-u

Uvoz fajlova u ulaznu tačku u Webpack

Apsolutne putanje u Webpack-u

Dodaci u Webpack-u

Loaderi u Webpack-u

Režimi kompajliranja

Vrste režima građenja u Webpack

Promena režima build-a u konfiguracionom fajlu u Webpack-u

Režimi prevođenja preko scripts u Webpacku

Automatsko pakovanje u Webpack-u

Ulazne i izlazne tačke

Ulazne i izlazne tačke u Webpack-u

Tačka izlaza u Webpack

Više ulaznih tačaka u Webpack

Hash u fajlu sklapanja u Webpack-u

Imena ulaznih tačaka u Webpack-u

Imenovane ulazne tačke-nizovi u Webpack-u

Imena fajlova izgradnje u Webpack

Imena i hes fajlova build-a u Webpack-u

Putanja do direktorijuma za build u Webpack-u

Kontekst tačaka ulaza u Webpack

Stilovi

Uvoz CSS stilova u Webpack

Loaderi za CSS stilove u Webpack-u

Podešavanje uvoza CSS stilova u Webpack

Testiranje importovanja CSS stilova u Webpack

Podešavanje CSS bundling-a u Webpack-u

Testiranje kompajliranja CSS-a u bundle u Webpack-u

Ime CSS bundle fajla u Webpack-u

Hash CSS bundle-a u Webpack-u

Više CSS bundle-ova u Webpack

Povezivanje CSS biblioteka u Webpack-u

Rad sa LESS-om u Webpack-u

Rad sa SASS-om u Webpack-u

HTML

Rad sa HTML šablonima u Webpack-u

Generisanje HTML šablona u Webpack-u

Više skript bundlova u layoutu u Webpack-u

Bundle skriptova sa hešom u maketu u Webpacku

Bundle stilova u maketu u Webpacku

Više snopova (bundlova) stilova u maketu u Webpack-u

Vaš sopstveni fajl izgleda u Webpack-u

Aseti (Assets)

Assets u Webpack-u

Assets u JavaScript bundle-ovima u Webpack

Assets u CSS bundle-ovima u Webpacku

Prilagodavanje putanje do asset fajlova u Webpack-u

Prilagođavanje putanje do grupa assets-a u Webpack-u

Inline assets u Webpack-u

Source assets u Webpack-u

Opšti assets u Webpack-u

Plugini

Čišćenje direktorijuma za build u Webpack-u

Kopiranje fajlova u Webpack