К содержанию

Webpack 5 Tutorial

Begrijpelijke tutorial over de Webpack bundler met theorie en taken voor beginners.

Basis

Werking van de Webpack bundler

Het probleem met cache in browsers

Webpack via ES modules in Webpack

Webpack installeren

Initiële configuratie van Webpack bundler

Configuratie van de Webpack build

Testbuild met Webpack

Het aansluiten van de bundle op de markup in Webpack

Bestanden importeren in het entry point in Webpack

Absolute paden in Webpack

Plugins in Webpack

Loaders in Webpack

Bouwmodi

Soorten buildmodi in Webpack

Het wijzigen van de buildmodus in het configuratiebestand in Webpack

Buildmodes via scripts in Webpack

Automatisch bouwen in Webpack

Entry en uitvoer punten

Ingangs- en uitgangspunten in Webpack

Entrypunt in Webpack

Meerdere invoerpunten in Webpack

Hash in buildbestand in Webpack

Namen van entry points in Webpack

Genoemde entry points-arrays in Webpack

Bestandsnamen van de build in Webpack

Namen en hash van buildbestanden in Webpack

Pad naar de build map in Webpack

Context van entry points in Webpack

Stijlen

CSS-stijlen importeren in Webpack

Loaders voor CSS-stijlen in Webpack

Configuratie van CSS-stijlimport in Webpack

Testen van het importeren van CSS-stijlen in Webpack

Configuratie van CSS-bundeling in Webpack

Testen van CSS bundeling in Webpack

CSS bundel bestandsnaam in Webpack

Hash CSS bundel in Webpack

Meerdere CSS bundels in Webpack

CSS-bibliotheken aansluiten in Webpack

Werken met LESS in Webpack

Werken met SASS in Webpack

HTML

Werken met HTML-lay-outs in Webpack

HTML-lay-out genereren in Webpack

Meerdere scriptbundels in lay-out in Webpack

Scriptbundels met hash in lay-out in Webpack

CSS Bundels in Lay-out in Webpack

Meerdere style bundels in een lay-out in Webpack

Eigen layoutbestand in Webpack

Assets

Assets in Webpack

Assets in JavaScript bundels in Webpack

Assets in CSS bundels in Webpack

Aanpassen van het pad naar assetbestanden in Webpack

Aanpassen van het pad naar assetgroepen in Webpack

Inline Assets in Webpack

Source assets in Webpack

Algemene Assets in Webpack

Plugins

Opruimen van de build map in Webpack

Bestanden kopiëren in Webpack