Mikrofrontendarkitektur med Module Federation · Lektion

Gennemgang af Webpack-grundlaget

Genopfrisk jeres viden om Webpacks kernefunktioner, herunder bundling, loaders og plugins.

Lektion 1 af 412 trin

Gennemgang af Webpack-grundlaget er en gratis Mikrofrontendarkitektur med Module Federation-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Mikrofrontendarkitektur med Module Federation, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.

Velkommen til Webpack!

Hej! I dag genopfrisker vi vores viden om Webpack, et effektivt værktøj til moderne webudvikling. Det kaldes ofte en statisk modulbundter.

Tænk på det som en intelligent assistent, der tager alle projektets filer – JavaScript, CSS og billeder – og samler dem i nogle få optimerede filer til browseren.

Hvorfor samler vi filer?

I webudvikling opdeler vi ofte koden i mange små, håndterbare filer (moduler). Det er godt for organiseringen, men kan føre til et problem:

Mange HTTP-anmodninger: Hver fil skal downloades separat af browseren.
Langsommere indlæsning: For mange anmodninger kan gøre dit websted langsommere.

Sammenbundtning løser dette ved at kombinere filerne, reducere antallet af anmodninger og forbedre ydeevnen!

Indgangspunkt: Startlinjen

Webpack skal vide, hvor det skal starte. Det kaldes et indgangspunkt. Det er typisk din primære applikationsfil, f.eks. index.js.

Ud fra dette indgangspunkt bygger Webpack en afhængighedsgraf, der viser, hvilke filer der afhænger af hinanden gennem import- eller require()-sætninger.

Et simpelt JavaScript-modul

Her er et lille JavaScript-eksempel. Webpack ville starte fra en indgangsfil og følge importsætninger som denne for at bygge sin afhængighedsgraf.

Prøv at køre det for at se, hvad et grundlæggende script kan gøre!

function createGreeting(name) {
  return "Hello, " + name + "!";
}

// This could be your main app logic
const user = "CoddyKit Learner";
console.log(createGreeting(user));

Output: Hvor bundterne placeres

Når Webpack er færdig med at samle filerne, skal det have et sted at placere de genererede filer. Det defineres af egenskaben output i din Webpack-konfiguration.

path: Angiver mappen til outputfilerne.
filename: Definerer navnet på din samlede JavaScript-fil, f.eks. bundle.js.

Loadere: Mere end JavaScript

Webpack forstår JavaScript- og JSON-filer direkte. Men hvad med andre filtyper som CSS, billeder eller TypeScript?

Det er her, loadere kommer ind i billedet! De fungerer som oversættere, der omdanner disse ikke-JavaScript-filer til gyldige moduler, som Webpack kan behandle og føje til dit bundt.

Eksempel på en loader: CSS-styling

Et almindeligt anvendelsesområde for loadere er behandling af CSS. Du vil ofte se css-loader og style-loader brugt sammen:

css-loader: Fortolker @import og url() ligesom import/require().
style-loader: Indsætter CSS i DOM'en.

Det giver dig mulighed for at importere CSS-filer direkte i din JavaScript!

Plugins: Udvidelse af Webpacks funktionalitet

Mens loadere håndterer individuelle filer, er plugins mere kraftfulde. De kan udføre en lang række opgaver under hele kompileringsprocessen.

Plugins kan:

Optimere størrelsen på dit bundt.
Håndtere aktiver som HTML-filer.
Indsætte miljøvariabler.

Eksempel på et plugin: HTMLWebpackPlugin

Et meget populært plugin er HTMLWebpackPlugin. Det forenkler oprettelsen af HTML-filer til dine bundter.

Dette plugin genererer automatisk en HTML-fil og indsætter dine samlede JavaScript-filer i den. Det er særligt nyttigt til implementering og ændring af cachelagring!

Filen `webpack.config.js`

Alle disse indstillinger – entry, output, loadere og plugins – konfigureres i en særlig fil: webpack.config.js.

Denne fil er et almindeligt Node.js-modul, der eksporterer et JavaScript-objekt med alle dine Webpack-konfigurationsindstillinger.

Hurtigt tjek: Webpack-værktøjer

Hvilken af Webpacks funktioner er ansvarlig for at omdanne ikke-JavaScript-filer som CSS eller TypeScript til moduler, som Webpack kan forstå?

Besvar den i den interaktive lektion

Opsummering: Webpacks kerne

Godt klaret! I denne lektion genopfriskede vi vores forståelse af Webpacks grundlæggende begreber:

Sammenbundtning: Kombination af filer for at optimere ydeevnen.
Indgangspunkt: Det sted, hvor Webpack begynder at bygge sin afhængighedsgraf.
Output: Det sted, hvor de samlede filer gemmes.
Loadere: Omdannelse af ikke-JavaScript-filer til moduler.
Plugins: Udvidelse af Webpacks funktioner på tværs af hele kompileringen.

Næste gang dykker vi ned i Module Federation!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Gennemgang af Webpack-grundlaget” gratis?

Ja — hele teksten til “Gennemgang af Webpack-grundlaget” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Mikrofrontendarkitektur med Module Federation-kurset, skal du opgradere til CoddyKit PRO. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Gennemgang af Webpack-grundlaget”?

Genopfrisk jeres viden om Webpacks kernefunktioner, herunder bundling, loaders og plugins. Du øver dig i Mikrofrontendarkitektur med Module Federation med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mikrofrontendarkitektur med Module Federation?

Der kræves ingen tidligere erfaring. Mikrofrontendarkitektur med Module Federation på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Gennemgang af Webpack-grundlaget”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mikrofrontendarkitektur med Module Federation-lektion?

Ja. Alle Mikrofrontendarkitektur med Module Federation-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Mikrofrontendarkitektur med Module Federation