Kom i gang med Webpack [Med eksempelprojekt]

Webpack er en modul bundler der gør det lettere at opbygge komplekse JavaScript-applikationer. Det har fået en seriøs trækkraft, da React-samfundet valgte det som hovedværktøj. Webpack er hverken en pakkechef eller en task runner da den bruger en anden (mere avanceret) tilgang, men også målet er at oprette en dynamisk byggeproces.

Webpack virker med vanilla JavaScript. Du kan bruge det til Bundle de statiske aktiver i en ansøgning, såsom billeder, skrifttyper, stylesheets, scripts i en enkelt fil mens tager sig af alle afhængigheder.

Du behøver ikke Webpack til at oprette en simpel app eller hjemmeside, for eksempel en, der kun har en JavaScript og en CSS-fil og et par billeder, men det kan være en livredder til en mere kompleks applikation med flere aktiver og afhængigheder.

Webpack vs. task løbere vs Browserify

Så hvordan stabler Webpack op i forhold til andre byggeværktøjer som Grunt, Gulp eller Browserify?

Grunt og Gulp er opgaveløvere. I deres config fil, du Angiv opgaverne, og task runner udfører dem. Det workflow af en task runner ser stort set ud som dette:

Webpack er dog en modul bundler der analyserer hele projektet, opretter et afhængigheds træ, og opretter en bundtet JavaScript-fil at det tjener til browseren.

Browserify er tættere på Webpack end opgave løbere, som det også opretter en afhængighedsgraf men det gør det kun til JavaScript-moduler. Webpack går et skridt videre, og det pakker ikke kun bundkode, men også også andre aktiver såsom billeder, stylesheets, skrifttyper mv.

Hvis du vil vide mere om hvordan Webpack sammenligner med andre byggeværktøjer, Jeg anbefaler dig to artikler:

Andrew Ray's Webpack: Hvornår skal du bruge og hvorfor på sin egen blog
Cory House Browserify vs Webpack på freeCodeCamp (med fantastiske illustrationer)

De to ovenstående illustrationer er fra Webpack materialer i Pro React håndbogen, en anden ressource, der er værd at se.

Fire centrale begreber i Webpack

Webpack har fire hovedkonfigurationsindstillinger kaldes “kernekoncepter” som du skal definere i udviklingsprocessen:

Indgang - det Udgangspunktet af afhængighedsgrafen (en eller flere JavaScript-filer).
Produktion - filen hvor du vil have output, der skal bundtes til (en JavaScript-fil).
læssemaskiner - transformationer på de aktiver, som slå dem til webpack moduler så de kan være tilføjet til afhængighedsgrafen. For eksempel, css-loader bruges til import af CSS-filer.
plugins - brugerdefinerede handlinger og funktionaliteter udført på bundtet. F.eks i18n-webpack-plugin indfører lokalisering i bundtet.

Læssere arbejder pr. Fil basis før kompileringen finder sted. Plugins udføres på den kombinerede kode, i slutningen af kompileringsprocessen.

Installer Webpack

Til installer webpack, Åbn kommandolinjen, naviger til din projektmappe og kør følgende kommando:

 npm init

Hvis du ikke ønsker at gøre konfigurationen selv, kan du lave npm befolke package.json fil med standardværdierne med følgende kommando:

 npm init -y

Næste skal du installere Webpack:

 npm installere webpack --save-dev

Hvis du har brugt standardværdierne, er det sådan, hvordan din package.json filen skal se ud nu (egenskaberne kan være i en anden rækkefølge):

 "navn": "_tests", "version": "1.0.0", "beskrivelse": "", "main": "webpack.config.js", "afhængigheder": "webpack" .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ "Fejl: ingen test angivet \" && exit 1 "," søgeord ": []," forfatter ":" "," licens ":" ISC "

Opret konfigurationsfilen

Du skal oprette en webpack.config.js fil i projektets rodmappe. Denne konfigurationsfil har en central rolle, da det er her du vil definere de fire centrale begreber (indgangspunkter, output, læsere, plugins).

Det webpack.config.js fil har en konfigurationsobjekt hvilke egenskaber skal du specificere. I denne artikel vil vi angive de fire egenskaber, som svarer til de fire centrale begreber (indgang, produktion, modul, og plugin), men config-objektet har også andre egenskaber.

1. Opret adgangspunktet (r)

Du kan have et eller flere indgangspunkter. Du skal definere dem i indgang ejendom.

Indsæt følgende kodestykke i webpack.config.js fil. Det angiver et indgangspunkt:

 module.exports = entry: "./src/script.js";

At angive mere end ét adgangspunkt, du kan bruge enten array eller objekt syntaks.

I din projektmappe, opret en ny src folder og a script.js fil inde i det. Dette bliver din indgang. Til test formål, bare læg en streng inde i den. Jeg brugte følgende (dog kan du også bruge en mere interessant):

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

2. Definer output

Du kan have kun en outputfil. Webpack pakker alle aktiver i denne fil. Du skal konfigurere produktion ejendom på følgende måde:

 const path = kræver ("path"); module.exports = entry: "./src/script.js", output: filnavn: "bundle.js", sti: path.resolve (__ dirname, 'dist');

Det filnavn ejendom definerer Navnet på den medfølgende fil, mens sti ejendom angiver navnet på biblioteket. Eksemplet ovenfor vil oprette /dist/bundle.js fil.

Selvom det ikke er obligatorisk, er det bedre at brug path.resolve () metode når du definerer sti ejendom, som det sikrer nøjagtig modulopløsning (den absolutte bane i udgangen er oprettet efter forskellige regler i forskellige miljøer, modulopløsning løser denne uoverensstemmelse). Hvis du bruger path.resolve, du skal kræve det sti Node modul på toppen af webpack.config.js fil.

3. Tilføj læsserne

Til Tilføj læsserne, du skal definere modul ejendom. Nedenfor tilføjer vi babel-loader det giver dig mulighed for Brug sikkert ECMAScript 6-funktionerne i jeres filer:

 const path = kræver ("path"); module.exports = entry: "./src/script.js", output: filnavn: "bundle.js", sti: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, ekskluder: / (node_modules | bower_components) /, brug: loader: "babel-loader", indstillinger: presets: ["env"];

Konfigurationen kan virke svært, men den kopieres kun af Babel læsser dokumentation. De fleste læssere leveres med enten en readme-fil eller en slags dokumentation, så du kan næsten altid vide, hvordan du konfigurerer dem korrekt. Og webpack-dokumenterne har også en side, der forklarer hvordan man konfigurerer module.rules.

Du kan tilføje så mange læssere som du har brug for, her er den fulde liste. Bemærk at du også skal installer hver loader med npm at få dem til at arbejde. For Babel-loader skal du installere de nødvendige Node-pakker med npm:

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

Hvis du kigger på din package.json fil, du vil se det npm tilføjede tre Babel-relaterede pakker til devDependencies ejendom, Disse vil tage sig af ES6-samlingen.

4. Tilføj plugins

Til tilføj plugins, Du skal angive plugins ejendom. Plus, du skal også kræve plugins en for en, som de er eksterne moduler.

I vores eksempel tilføjer vi to Webpack plugins: the HTML Webpack plugin og Preload Webpack plugin. Webpack har a flot plugin økosystem, Du kan gennemse hele listen her.

At kræve plugins som Node moduler, lav to nye konstanter: HtmlWebpackPlugin og PreloadWebpackPlugin og brug kræve() fungere.

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

Ligesom i tilfælde af læssere, skal du også installer webpack plugins med npm. For at installere de to plugins i eksemplet, kør følgende to kommandoer i din kommandolinje:

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

Hvis du tjekker din package.json fil nu, du vil se det npm tilføjede de to plugins til devDependencies ejendom.

Kør Webpack

Til Opret afhængigheds træet og Udgiv bundtet, Kør følgende kommando i kommandolinjen:

 webpack

Det plejer tager et eller to minutter til Webpack at bygge projektet. Når du er færdig, ser du en lignende besked i din CLI:

Hvis alt gik rigtigt Webpack oprettet a dist folder i roden af dit projekt og placeret de to bundtede filer (bundle.js og index.html) inde i den.

Github repo

Hvis du vil tjekke ud, downloade eller gaffel hele projektet, så kig på vores Github repo.