Sådan erobres Webpack 4 og bygger en sød React-app

Denne artikel er forældet med den nye udgivelse af babel. Kontroller venligst den opdaterede artikel "Sådan kombineres Webpack 4 og Babel 7 for at oprette en fantastisk React-app", sidst opdateret 13. oktober 2018
Billedkreditter http://pexels.com Porapak Apichodilok

I denne artikel skal jeg gennemgå, hvordan man opretter en React-applikation ved hjælp af Webpack 4. Ved udgangen af ​​denne tutorial vil du vide, hvordan du genindlæser din applikation varmt, hver gang du trykker på ctrl + s i den valgte editor. .

Jeg bruger Visual Studio Code (VS Code), og jeg elsker den. Det er let, fleksibelt, og det bedste er, at det er gratis. Jeg elsker fri. Hvis du ikke har prøvet det, så prøv det.

Vores mål

Vores mål med denne tutorial er at oprette en React-app med nogle seje funktioner som async / vente. Jeg bruger ikke react-router version 4 i denne tutorial, fordi jeg primært vil fokusere på, hvordan man spiller med Webpack.

Så i slutningen af ​​denne artikel vil du være god til:

  • Opsætning af et udviklingsmiljø med varm omlæsning ved hjælp af webpack-dev-server
  • Tilføjelse af SCSS og HTML support i din kode med webpack
  • Tilføjelse af support til funktioner som try / fang, async / vente og hvile operatør
  • Oprettelse af en produktionsopbygning - optimeret og klar til implementering
  • Opsætning af forskellige miljøer i din kode som scene, demo og produktion

Fyre, jeg siger jer, at hvis Webpack virker en smule hård, vil det efter dette ikke være tilfældet mere.

Udviklingsmiljø

Lav mappen

Lav en mappe kaldet tutorial i dit bibliotek.

Opret package.json

Åbn din terminal, og gå ind i tutorialmappen.

Type:

npm start -y

Dette opretter en package.json-fil i din tutorialmappe.

Filen ser sådan ud:

Sådan ser din package.json-fil oprindeligt ud. Jeg bruger VS-kode til formålet med denne tutorial

Opret filen index.js

Jeg opretter en mappe kaldet src i min tutorialmappe.

I mappen src opretter jeg en fil, der hedder index.js.

og ja, jeg vil bruge star trek-citater meget under denne tutorial, fordi det er AWESOME: D

Bundt koden

Jeg ved, at dette ikke er meget, men bær med mig. Tingene bliver interessante snart.

For at bundle vores kode skal vi nu konfigurere nogle konfigurationer, så Webpack kan vide, hvor koden skal pakkes fra. Til det er vi nødt til at installere nogle afhængigheder.

Så lad os starte med at skrive:

npm i - save-dev webpack webpack-cli webpack-dev-server @ babel / core @ babel / preset-env @ babel / preset-react @ babel / preset-stage-2 babel-loader@^8.0.0-beta

WOW! Jeg ved, at det var en masse afhængigheder. Lad os sammenfatte, hvorfor vi havde brug for disse i første omgang.

webpack: Vi har brug for Webpack for at bundle vores kode.

webpack-cli: Vi bruger nogle CLI-funktioner til Webpack for at gøre vores liv lettere, mens vi skriver nogle scripts.

webpack-dev-server: Jeg opretter en server ved hjælp af webpack-dev-server-pakken. Dette er kun beregnet til at blive brugt i udviklingsmiljøet og ikke til produktion. Dette betyder, at mens jeg udvikler og arbejder med min kode, har jeg ikke brug for en separat server som Node.js.

@ babel / preset-env: Denne pakke opfører sig nøjagtigt det samme som @ babel / preset-recent (eller @ babel / preset-es2015, @ babel / preset-es2016 og @ babel / preset-es2017 sammen). Cool ret?

@ babel / preset-react: Navnet på pakken lyder klart - dette tilføjer support til reaktion, mens vi bundter vores kode.

@ babel / preset-stage-2: Dette tilføjer trin-2-funktionen i Ecma TC39-forslaget. Du kan læse mere om det her.

@ babel / loader: Dette er en afhængighed af Webpack. Det giver mulighed for transpilering af Babel vha. Webpack.

@ babel / core: Dette er en afhængighed af selve @ babel / loader.

Så nu ved du lidt om, hvad vi installerede, og hvorfor.

Din package.json-fil skal se sådan ud:

Sådan ser din package.json-fil ud lige nu.

Opret en Babel-fil

Vi er også nødt til at tilføje en ny fil kaldet .babelrc, så lad os oprette den også.

Opret en fil .babelrc og følgende kodestykker i dit hovedmappekatalog. Dette hjælper Webpack, når du bundterer din kode og konverterer de Sassy-koder, som vi vil skrive.

Konfigurer Webpack 4

Okay, så den kedelige del er gjort. Lad os gå ind på hoveddelen af ​​denne tutorial: opsætning af Webpack 4.

For at citere fra Star Trek:

Han opgaver mig. Han opgaver mig; og jeg skal have ham. Jeg vil jage ham 'rundt om Nibias måner og' rundt om Antares malstrøm og 'rundt om Perdition's flammer, før jeg giver ham op.

Så lad os oprette en ny mappe kaldet config og inde i den mappe lad os oprette en fil kaldet webpack.base.config.js.

Årsagen til at jeg kalder denne fil .base er fordi denne indeholder alle de fælles funktioner, vi vil bruge i vores udvikling og forskellige produktionsmiljøer. Ændringer i denne ene fil afspejles i alle miljøer. Igen, hvis det ikke giver mening nu, fyre, bær mig med et par minutter mere. Det vil begynde at give mening.

Uden yderligere ventetid skal du skrive disse kodelinjer i din config / webpack.base.config.js-fil:

Module.rules definerer det sæt regler, som Webpack skal anvende til bestemte filtypenavne.

I vores regnearray definerer vi en test, der fortæller Webpack, hvilken udvidelse der skal bruges. Her fortæller jeg Webpack at anvende en bestemt regel på kun .js-baserede filer.

Næste kommer udelukke. Mens jeg samler mig, ønsker jeg ikke, at Webpack skal transponere alt. Dette vil blive meget langsomt, især når jeg også inkluderer min node_modules-mappe.

Så jeg vil ekskludere det ved hjælp af egenskaben ekskluder i regelsættet. Den sidste, som er den vigtigste, er egenskaben use.loader. Her giver jeg det værdien af ​​babel-loader. Hvad babel-loader gør er at bruge vores definerede forudindstillinger, som vi definerede i vores .babelrc-fil til at transportere alle filer med en .js-udvidelse.

Indtil videre så godt, ja? Vi er mere end halvvejs der ...

Selv professor Snape bifalder dig. Fantastiske arbejde fyre, vi er næsten der.

Endnu en ting til: Webpack 4 indstiller src-mappen som standardindgangspunkt og dist-mappen som standardudgangspunkt for dit bundlede resultat. Sej, ikke?

Gå ind i din tutorialmappe og kør dette script. Dette bundter al din kode og kører den kode i browseren:

Adeel @ Frodo MINGW64 ~ / Desktop / artikel / tutorial
$ node_modules / .bin / webpack-dev-server - udvikling af modus --config config / webpack.base.config.js --åbne --hot --history-api-fallback

Grundlaget for dette script er, at det vil kombinere al vores kode i src-biblioteket og køre den i browseren på denne adresse:

http: // localhost: 8080 /
Hmm! Det er anderledes. Dette giver en fejl: Kan ikke GET /

HTML

Så da vi kørte scriptet, kompilerede det og åbnede browseren. Nu havde den koden, som vi skrev i vores index.js-fil, men den havde ikke en .html-fil, hvor den kunne køre den.

Vi er nødt til at tilføje en html-webpack-plugin i vores webpack.base.config.js-fil og en index.html-fil i vores src-bibliotek.

Installer først afhængigheden for at transportere HTML med Webpack:

npm i - gemme-dev html-webpack-plugin

Din package.json-fil skal se sådan ud:

Lad os nu tilføje en HTML-fil i vores src-bibliotek og navngive den indeks.html:

Vores projektkatalog skal se sådan ud nu:

Vores projektkatalog skal se sådan ud

Mens vi er ved det, lad os tilføje det html-webpack-plugin i vores webpack.base.config.js-fil.

Så vi tilføjede noget nyt til vores webpack-konfigurationsfil - bemærkede du? Jeg har bare rodet med dig. Jeg ved, at du gjorde det.

Godt job fyre, vi er næsten færdige.

Hvad gør dette plugin nu? Det er meget simpelt. Plugins, helt enkelt, tilføj evner til din Webpack. Du kan læse mere om dem her.

Nu har jeg tilføjet lige dette ene plugin kaldet html-webpack-plugin. Formålet med dette plugin er meget enkelt: det opretter HTML-filer, der tjener dine bundfiler.

Ok, så lad os køre dette script igen (krydsede fingre). ”Jeg håber ingen fejl denne gang,” sagde hver udvikler en gang.

Adeel @ Frodo MINGW64 ~ / Desktop / artikel / tutorial
$ node_modules / .bin / webpack-dev-server - udvikling af modus --config config / webpack.base.config.js --åbne --hot --history-api-fallback

Dette vil samle og åbne din browser i den tilgængelige standardport. Min er:

http: // localhost: 8080 /
Jeg klikkede blot på ctrl + shift + i dette åbnede inspektionselementet i min Chrome-browser

Blå del: Den blå del er ganske enkelt, hvor jeg indsatte mine metakoder og definerede en titel til appen.

Gul del: Den gule del fremhævet er den hårdkodede del, som vi skrev i vores index.html-fil. Det er her vores fremtidige React-app er bosiddende.

Rød del: Den del, hvor jeg understregede i rødt, er den mest interessante del. Vi har aldrig skrevet dette i vores index.html-fil, så hvor kom det fra?

Webpack er meget smart. Den tog filen i din index.js, bundlede det hele pænt sammen og tilføjede det hele pænt i filen kaldet main.js. Derefter indsprøjtes det i vores index.html-fil. Super sejt!

Tilføj React

Lad os tilføje React og få festen til at gå. Til det er vi nødt til at installere nogle afhængigheder.

Lad os starte med:

npm reagerer jeg reagerer dom - gem

Gå nu ind i din index.js-fil og skriv:

Lad os køre det script igen:

Adeel @ Frodo MINGW64 ~ / Desktop / artikel / tutorial
$ node_modules / .bin / webpack-dev-server - udvikling af modus --config config / webpack.base.config.js --åbne --hot --history-api-fallback

Dette vil samle og åbne din browser i standardporten. Min er:

http: // localhost: 8080 /

Wow, så du hvad der åbnede i din browser? Ja! Du gjorde! Din første Webpack-konfigurerede React-app.

Nu er der stadig mange ting at gøre. Men mand åh mand. Godt arbejde!

Dette er vores reage-app, der kører Yayyyy! :)

Nu er det den sjove del. Gå ind i din index.js-fil, og skift titlen til alt, hvad du vælger. Hit ctrl + s, og tjek din browser. Det opdaterede automatisk dit indhold.

Sej, ikke?

Lad os sammenfatte

Vi har tilføjet et udviklingsmiljø. Vi tilføjede genopladning af varmt modul. Vi tilføjede support til .js-filer med React-kode. I næste del tilføjer vi SCSS-support i vores Webpack.

SCSS

For SCSS-support skal vi tilføje nogle flere afhængigheder i vores package.json-fil.

Installer følgende pakker:

npm i - gemme-dev style-loader css-loader sass-loader node-sass extract-text-webpack-plugin@^4.0.0-beta.0

sass-loader: Dette plugin hjælper os med at kompilere SCSS til CSS.

node-sass: Sass-loader krævede node-sass som en peer-afhængighed.

css-loader: CSS-loader tolker @import og url () som import / kræver () og vil løse dem.

style-loader: Tilføjer CSS til DOM ved at injicere typografi.

extract-text-webpack-plugin: Det flytter alle de krævede .css-moduler til en separat CSS-fil.

Så dine stilarter er ikke længere indfodret i JavaScript-bundtet, men er i en separat CSS-fil (styles.css). Hvis din samlede stilarkvolumen er stor, vil den være hurtigere, fordi CSS-bundtet indlæses parallelt med JavaScript-bundtet.

Nu hvor vores afhængigheder er installeret, lad os foretage nogle ændringer i vores Webpack-konfigurationsfil.

Lad os forstå, hvad vi gjorde her først. I vores module.rules har vi tilføjet en ny regel. Hvad denne regel gør er at anvende en vis bundling til alle .scss-filer. Jeg håber, det var fornuftigt. Inde i vores brug fortæller vi det uddrag nogle oplysninger.

Lad os komme lidt dybere, og jeg vil prøve at gøre det så simpelt som jeg kan.

{
   fallback: "stil-loader",
   Brug: "css-loader! sass-loader"
}

Prøv at læse dette stykke kode fra bund til top.

Hent al SASS-kode - .scss - ved hjælp af sass-loader og konverter den derefter til CSS-kode vha. Css-loader. Tag derefter al den CSS-kode og sprøjt den ind i vores DOM med -mærket ved hjælp af stil-loader.

Nu er hele dette objekt omgivet af:

Brug: ExtractTextPlugin.extract ({...})

Denne ExtractTextPlugin.extract ({}) vil tage al vores CSS-kode, som formodes at blive injiceret i vores DOM og kombinere al CSS-koden og bundte den i en enkelt fil kaldet style.css.

Den enorme fordel ved denne tilgang er, at hvis vores samlede stilarkmængde er stort, mens du indlæser det fra browseren, indlæser det det parallelt med vores JavaScript-kode. Dette vil få vores site til at downloade hurtigere.

I den anden del måtte vi tilføje en ny post i vores plugins-array, som var:

nyt ExtractTextPlugin ('style.css')

Dette fortæller grundlæggende, at plugin skal kombinere al vores CSS-kode og lægge den i en fil, der hedder style.css.

Lad os oprette en ny fil kaldet styles.scss i vores rodmappe og lege med lidt styling.

Tilføj nu styles.scss i din index.js-fil. Webpack giver dig mulighed for at importere CSS i JavaScript. Det er fantastisk, jeg ved.

I din kode skal du blot tilføje denne linje:

import './style.scss';

Kør nu dette script igen, og tjek din browser:

Adeel @ Frodo MINGW64 ~ / Desktop / artikel / tutorial
$ node_modules / .bin / webpack-dev-server - udvikling af modus --config config / webpack.base.config.js --åbne --hot --history-api-fallback

Dette er sidste gang, vi skriver det manuelt. Når vi kommer op, laver vi et script. Og ja, jeg kan huske - jeg har stadig ikke forklaret, hvad dette script gør. Jeg vil. Jeg lover.

Anyway, tjek din browser… ok cool.

Vores React-app med noget .scss-kode. Vi gynger det fyre,

Lav scriptet

Lad os skrive nogle script, og gøre vores liv lidt lettere. Årsagen til, at jeg fortsatte med at bede dig om at skrive dette script igen og igen, er, at du rent faktisk ville huske det og ikke bare kopiere og indsætte det fra internettet.

Lad os hoppe ind i vores package.json-fil.

Tilføj følgende kode i dit scriptsafsnit:

Skriv nu i din terminal:

Adeel @ Frodo MINGW64 ~ / Desktop / artikel / tutorial
$ npm kørestart: dev

Bemærk: I scriptet behøver vi ikke længere at skrive dette:

node_modules / .bin / webpack

Flere detaljer om i webpack-dev-server-brugsdokumenter her.

Scriptet til start: dev ser sådan ud nu:

webpack-dev-server - modeudvikling --config config / webpack.base.config.js --åbne --hot --history-api-fallback

Lad os fordele, hvad dette script gør:

webpack-dev-server - udvikling af tilstand

Udviklingen flag - modus indstiller den bygning, der er den mest optimerede til udviklingsformål. Det har hurtig inkrementel kompilering til udviklingscyklussen og nyttige fejlmeddelelser under kørsel.

Du kan læse mere om tilstande i denne fantastiske artikel: Webpack 4: Mode og Optimization.

Flagget --config config / webpack.base.config.js fortæller Webpack, hvor al vores konfiguration er placeret til vores Webpack bundling.

Flagget - open fortæller webpack-dev-serveren at åbne browseren.

Flagget --hot fortæller webpack-dev-serveren at aktivere Webpacks hotmoduludskiftningsfunktion. Dette opdaterer browseren hver gang du rammer ctrl + s

Flaget - -history-api-fallback fortæller webpack-dev-server at falde tilbage til index.html i tilfælde af at en anmodet ressource ikke kan findes. Du kan læse mere om history-api-fallback her.

Produktionsmiljø

Nu hvor vi er færdige med vores udviklingsmiljø, lad os få vores hænder beskidte og gøre vores kode klar til produktion.

Lad os oprette en ny fil webpack.opt.config.js. Denne fil vil indeholde alle vores produktionsoptimeringer, som vi har brug for.

Planen er at gøre noget som at flette vores webpack.base.config.js-fil med webpack.opt.config.js-filen for at oprette en produktionskonfiguration til vores applikation på én side.

Så lad os begynde. Opret en ny fil, der hedder webpack.opt.config.js i dit konfigurationsbibliotek. opt er kort til optimering. Hvis nogen kan komme med et køligere navn, så lad mig det vide.

Vi er nødt til at installere nogle afhængigheder for at hjælpe med vores optimeringer:

$ npm i - gemme-dev optimere-css-aktiver-webpack-plugin uglifyjs-webpack-plugin

Selvom - mode-produktionen leverer selv nogle temmelig seje optimeringer. Du kan læse mere om det her. Men jeg vil stadig gerne tilføje et par mere.

Koden er som følger:

Lad os sammenfatte, hvad vi gjorde her. Jeg føjede til nye moduler i dev-afhængighed.

uglifyjs-webpack-plugin: Som navnet lyder, vil dette uglify og minimere al vores kode for at reducere bundtstørrelsen.

optimize-css-asset-webpack-plugin: Dette plugin minimerer og optimerer din CSS-kode.

Indtil videre så gode alle sammen - vi er næsten færdige.

Bare lidt mere, og du er nået til målstregen.

Kan du huske, da jeg talte om en måde, hvor vi ikke behøver at gentage vores kode igen og igen? Den ene til udvikling, den anden til produktion ... og lad mig ikke engang starte med at styre disse miljøers scene, demo og live! Nå, det slutter i dag. Der er ikke flere kodeventagelser.

Jeg præsenterer for dig vores frelser, den hvide ridder Webpack Merge. Dette plugin er fantastisk, da navnet lyder.

Hvad dette vil gøre er at kombinere vores konfiguration til .base- og .opt-filer på en smart måde. Det giver en fletningsfunktion, der sammenkæder arrays og fusionerer objekter for at oprette et nyt objekt.

Så uden yderligere problemer, lad os installere dette fantastiske plugin også:

$ npm i - gemme-dev webpack-merge

Lad os oprette vores endelige webpack.prod.config.js-fil:

Vi overfører en parameter til vores funktion kaldet produktionskonfiguration og brugt env. Dette er, hvordan vi videregiver oplysninger i Webpack gennem vores CLI (jeg forklarer, hvordan vi gør det om et øjeblik).

Jeg passerer noget, der hedder NODE_ENV. Det er den værdi, i hvilken jeg vil fortælle min webpakke, at hvilket miljø jeg vil køre - som demo, test, live eller hvad som helst.

Derefter indstiller jeg, hvad jeg får i mit env.NODE_ENV i min proces.env.NODE_ENV ved hjælp af Webpack-indbygget plugin kaldet DefinePlugin. Vi er bare nødt til at sikre os, at uanset hvilken værdi vi passerer altid er strengere.

Så i den sidste linje gør vi dette:

module.exports = merge.smart (baseConfig, optimizationConfig, productionConfiguration);

Hvad der sker her er, at vi bruger webpack-merge's metode kaldet smart til smart at flette alle tre af vores konfigurationer. På den måde gentager vi ikke den samme kode overalt. Dette er den fedeste funktion.

Jeg kan huske en tid før jeg fandt dette plugin. Det var en masse rod, der gjorde det samme i alle mine Webpack-konfigurationsfiler. Nu er det bare en leg.

Uanset hvad, gå videre, siden vores Webpack-konfigurationer endelig er færdige. Lad os gøre vores produktionsklare build-script i vores package.json-fil.

Tilføj følgende linjer i dit scriptsafsnit:

Jeg starter med Prestart: prod-kommandoen:

"prestart: prod": "webpack - modeproduktion --config config / webpack.prod.config.js --env.NODE_ENV = produktion --progress",

Vi bryder denne kommando ned.

webpack - modeproduktion. Som vi diskuterede tidligere, vil produktionstilstand, når vi diskuterer udviklingsfunktion, køre nogle virkelig seje optimeringsprocesser på vores bundne fil (er) for at gøre størrelsen mindre.

Det næste flag er --config config / webpack.prod.config.js. Dette fortæller Webpack, hvor vores produktionskonfiguration ligger i biblioteket.

Env-flag angiver den miljøvariabel, som vi passerer gennem vores webpack-cli. Det går sådan: --env.NOVE_ENV = produktion passerer et objekt i vores webpack.prod.config.js med nøglen NODE_ENV, der har den værdi, der kaldes produktion.

Du kan videregive så mange miljøvariabler, som du vil, som --env.X = foo --env.Y = bar. Derefter vil du i din konfiguration få disse værdier på samme måde som du får adgang til NODE_ENV-værdi.

Det sidste flag er - produkt. Det fortæller ganske enkelt fremdriften / status for bundtet, ligesom hvilken procentdel bundtet har afsluttet, mens de bundlede filer oprettes i din dist-mappe.

En hurtig påmindelse

Webpack 4 indstiller som standard src-mappen som standardindgangspunkt og dist-mappen som standardudgangspunkt for dit bundlede resultat. Sej, ikke? Jeg ved, at jeg gentager dette - fortalte jeg dig tidligere - men det er derfor, jeg sagde påmindelse.

Tilbage til vores tutorial

Vi diskuterede prestart: prod script, nu vil vi tale om det endelige script kaldet start: prod.

Med npm, hver gang du vil køre scripts efter hinanden, sekvenserer du dem med preCOMMAND COMMAND postCOMMAND.

Som vi gjorde her:

$ prestart: prod
$ start: prod

Så vi vil altid køre scriptet npm run start: prod, før vi udfører scriptet kaldet npm run prestart: prod.

Lad os diskutere start: prod.

$ node server => {Dette svarer til} => $ node server / index.js

Lad os oprette en mappe kaldet server. Opret en fil kaldet index.js i mappen. Men inden vi gør det, er vi nødt til at tilføje en sidste afhængighed.

Dette bliver Express, vores back-end Node.js-ramme:

npm i - gem express

Lad os diskutere denne kode, før vi fortsætter videre.

Vi instantierer vores app med express () og opsætter derefter en statisk offentlig mappe kaldet dist. Dette er den samme mappe oprettet af Webpack, når vi kører vores produktionskommando.

Vi inkluderer vores rutefil - vi opretter den på et sekund - og sætter rutefilen til / biblioteket.

Derefter oprettede vi en port. Hvis der ikke stilles nogen mulighed for at indstille via noden CLI, bruger vi port 3000. Derefter opretter vi en HTTP-server og lytter på denne server via porten. Til sidst trøster vi til vores terminal, at vi kører serveren på den bestemte port.

Lad os oprette vores sidste fil kaldet ruter / indeks.js:

Her kontrollerer vi, at uanset hvad brugeren kommer på, omdirigerer stien brugeren til dist / index.html, hvor vores React-applikation bor.

Og det er det. Vi er færdige.

Gå nu i din terminal og skriv:

npm kørestart: prod

Dette vil tage et øjeblik. Det viser dig fremskridtene, mens den transpilerer. Derefter trøster den en meddelelse om, at den lytter til port 3000, hvis der ikke findes nogen.

Gå nu til din browser http: localhost: 3000 / og din ansøgning er i live.

Tillykke!

Se koden på GitHub.

Et råb til min gode ven Ahmed Abbasi for at hjælpe mig med at bevise at læse denne artikel.

Du kan følge mig på Twitter, jeg ville meget gerne tale og høre jer ud.