Komme i gang med Webpack [Med Eksempel Prosjekt]

Webpack er en modulpakker som gjør det lettere å bygge komplekse JavaScript-applikasjoner. Det har fått alvorlig trekkraft siden React-fellesskapet valgte det som hovedbyggverktøy. Webpack er verken en pakkeansvarlig eller en oppgaveløper som det bruker en annen (mer avansert) tilnærming, men målet er også å sette opp en dynamisk byggeprosess.

Webpack fungerer med vanilje JavaScript. Du kan bruke den til bunte de statiske eiendelene til et program, for eksempel bilder, skrifter, stilark, skript i en enkelt fil mens ta vare på alle avhengighetene.

Du trenger ikke Webpack for å lage en enkel app eller et nettsted, for eksempel en som bare har en JavaScript og en CSS-fil og noen bilder, men det kan være en livredder for en mer komplisert søknad med flere eiendeler og avhengigheter.

Webpack vs oppgave løpere vs Browserify

Så, hvordan stakk Webpack opp sammenlignet med andre byggverktøy som Grunt, Gulp eller Browserify?

Grunt og Gulp er oppgaveløpere. I deres config-fil, du spesifiser oppgavene, og oppgaveløperen utfører dem. De arbeidsflyt av en oppgaveløper ser i utgangspunktet slik ut:

Impack er imidlertid en modulpakker som analyserer hele prosjektet, setter opp et avhengighets tre, og lager en bundet JavaScript-fil at den tjener til nettleseren.

Browserify er nærmere Webpack enn oppgaveløpere, som det også oppretter en avhengighetsgraf men det gjør det bare for JavaScript-moduler. Webpack går et skritt videre, og det pakker ikke bare kildekoden, men også også andre eiendeler for eksempel bilder, stilark, skrifter osv.

Hvis du vil vite mer om hvordan Webpack sammenligner med andre byggverktøy, Jeg anbefaler deg to artikler:

1. Andrew Ray er Webpack: Når skal du bruke og hvorfor på sin egen blogg
2. Cory House Browserify vs Webpack på freeCodeCamp (med flotte illustrasjoner)

De to illustrasjonene ovenfor er fra Webpack-materialer i Pro React-håndboken, En annen ressurs som er verdt en titt.

Fire kjernekonsepter av Webpack

Webpack har fire hovedkonfigurasjonsalternativer kalt “kjernekonsepter” som du må definere i utviklingsprosessen:

1. Inngang - de Utgangspunktet av avhengighetsgrafen (en eller flere JavaScript-filer).
2. Produksjon - filen hvor du vil ha utdata som skal legges sammen til (en JavaScript-fil).
3. lastere - transformasjoner på eiendeler som slå dem til webpack moduler slik at de kan være lagt til avhengighetsgrafen. For eksempel, css-loader brukes til import av CSS-filer.
4. plugins - tilpassede handlinger og funksjoner utført på bunten. For eksempel, i18n-Webpack-plugin innebærer lokalisering i bunten.

Lastere arbeider på en per-fil basis før kompileringen finner sted. Plugins blir utført på den medfølgende koden, på slutten av kompileringsprosessen.

Installer Webpack

Til installer Webpack, åpne kommandolinjen, naviger til prosjektmappen din, og kjør følgende kommando:

 npm init 

Hvis du ikke vil gjøre konfigurasjonen selv, kan du lage npm fylle ut package.json filen med standardverdiene med følgende kommando:

 npm init -y 

Deretter installerer du Webpack:

 npm installere webpack - save-dev 

Hvis du har brukt standardverdiene, er dette slik package.json filen skal se ut nå (egenskapene kan være i en annen rekkefølge):

 "navn": "_tests", "versjon": "1.0.0", "beskrivelse": "", "main": "webpack.config.js", "avhengigheter": "webpack" .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," skript ": " test ":" echo \ "Feil: ingen test angitt \" && avslutte 1 "," søkeord ": []," forfatter ":" "," lisens ":" ISC " 

Opprett konfigurasjonsfilen

Du må opprette en webpack.config.js fil i rotmappen til prosjektet. Denne konfigurasjonsfilen har en sentral rolle, da det er her du vil definer de fire kjernekonseptene (inngangspunkter, utgang, lastere, plugins).

De webpack.config.js fil har en konfigurasjonsobjekt hvilke egenskaper du må spesifisere. I denne artikkelen vil vi spesifisere de fire egenskapene som samsvarer med de fire kjernekonseptene (inngang, produksjon, modul, og plugg inn), men config-objektet har også andre egenskaper.

1. Lag inngangspunktet (e)

Du kan ha ett eller flere inngangspunkter. Du må definere dem i inngang eiendom.

Sett inn følgende kodestykke i webpack.config.js fil. Den angir ett inngangspunkt:

 module.exports = oppføring: "./src/script.js"; 

For å angi mer enn ett oppføringspunkt du kan bruke enten array eller objekt syntaks.

I prosjektmappen din, lage en ny src mappe og a script.js filen i den. Dette blir din inngangspunkt. For test, bare sett en streng inni det. Jeg brukte følgende (men du kan også bruke en mer interessant):

 const greeting = "Hei. Jeg er et Webpack-startprosjekt."; document.write (hilsen); 

2. Definer utgangen

Du kan ha bare én utdatafil. Webpack pakker alle eiendelene inn i denne filen. Du må konfigurere produksjon eiendom på følgende måte:

 const path = krever ("path"); module.exports = oppføring: "./src/script.js", utgang: filnavn: "bundle.js", sti: path.resolve (__ dirname, 'dist'); 

De filnavn eiendom definerer navnet på den medfølgende filen, mens sti eiendom Angir navnet på katalogen. Eksemplet ovenfor vil opprette /dist/bundle.js fil.

Selv om det ikke er obligatorisk, er det bedre å bruke path.resolve () metode når du definerer sti eiendom, som det sikrer nøyaktig moduloppløsning (den absolutte banen til utgangen er opprettet i henhold til forskjellige regler i forskjellige miljøer, moduloppløsningen løser denne uoverensstemmelsen). Hvis du bruker path.resolve, du trenger å krever de sti Nodemodul på toppen av webpack.config.js fil.

3. Legg til lastere

Til legg til lastere, du må definere modul eiendom. Nedenfor legger vi til babel-loader som tillater deg å bruk sikkert ECMAScript 6-funksjonene i JS-filene dine:

 const path = krever ("path"); module.exports = oppføring: "./src/script.js", output: filnavn: "bundle.js", sti: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, ekskluder: / (node_modules | bower_components) /, bruk: loader: "babel-loader", alternativer: presets: ["env"]]; 

Konfigurasjonen kan virke vanskelig, men den er bare kopi-limt inn fra Babel loader dokumentasjon. De fleste lasteapparater kommer med enten en readme-fil eller en slags dokumentasjon, så du kan (nesten) alltid vite hvordan du konfigurerer dem riktig. Og Webpack-dokumentene har også en side som forklarer hvordan å konfigurere module.rules.

Du kan legge til så mange lastere som du trenger, her er den fulle listen. Legg merke til at du også må installer hver laster med npm å få dem til å fungere. For Babel loader må du installere de nødvendige Node-pakkene med npm:

 npm installere - save-dev babel-loader babel-core babel-preset-env webpack 

Hvis du ser på din package.json fil, du vil se det npm lagt til tre Babel-relaterte pakker til devDependencies eiendom, Disse vil ta vare på ES6-samlingen.

4. Legg til pluginene

Til legg til pluginene, du må spesifisere plugins eiendom. I tillegg må du også krever pluginene en etter en, som de er eksterne moduler.

I vårt eksempel legger vi til to Webpack plugins: the HTML Webpack-plugin og Preload Webpack plugin. Webpack har en fint plugin økosystem, Du kan bla gjennom hele listen her.

Å kreve plugins som Node-moduler, opprett to nye konstanter: HtmlWebpackPlugin og PreloadWebpackPlugin og bruke kreve () funksjon.

 const path = krever ("path"); const HtmlWebpackPlugin = krever ("html-webpack-plugin"); const PreloadWebpackPlugin = krever ("preload-webpack-plugin"); module.exports = oppføring: "./src/script.js", output: filnavn: "bundle.js", sti: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, ekskluder: / (node_modules | bower_components) /, bruk: loader: "babel-loader", alternativer: presets: ["env"], plugins: [new HtmlWebpackPlugin (), ny PreloadWebpackPlugin ()]; 

På samme måte som i tilfelle lastere, må du også installer Webpack plugins med npm. For å installere de to pluginene i eksemplet, kjør følgende to kommandoer i kommandolinjen din:

 npm installere html-webpack-plugin - save-dev npm installere - save-dev preload-webpack-plugin 

Hvis du sjekker din package.json fil nå, du vil se det npm lagt til de to plugins til devDependencies eiendom.

Kjør Webpack

Til opprett avhengighetstreet og utgir bunten, Kjør følgende kommando i kommandolinjen:

 Webpack 

Det pleier å være tar ett eller to minutter for Webpack å bygge prosjektet. Når du er ferdig, ser du en lignende melding i CLI:

Hvis alt gikk riktig Webpack opprettet en dist mappe i roten til prosjektet ditt og plassert de to buntede filene (bundle.js og index.html) inni det.

Github repo

Hvis du vil sjekke ut, laste ned eller gaffel hele prosjektet, ta en titt på vår Github repo.