Share
I den forrige opplæringen lærte vi hvordan du oppretter et Webpack-prosjekt og hvordan du bruker lastere til å behandle JavaScript. Hvor Webpack virkelig skinner, er imidlertid i stand til å kombinere andre typer statiske eiendeler som CSS og bilder, og inkluderer dem i prosjektet bare når de kreves. La oss begynne med å legge til noen stiler på vår side.
Først oppretter du en vanlig CSS-fil i en stilarkatalog. Ring inn main.css og legg til en stilregel for overskriftselementet.
h2 bakgrunn: blå; farge: gul;
Så hvordan får vi dette stilarket til vår side? Vel, som de fleste ting med Webpack, trenger vi en annen laster. To faktisk: css-loader og stil-loader. Den første leser alle stilene fra våre CSS-filer, mens den andre injiserer stilene i vår HTML-side. Installer dem slik:
npm installer stil-loader css-loader
Deretter forteller vi Webpack hvordan de skal brukes. I webpack.config.js, Vi må legge til et annet objekt i lasterammen. I det vil vi legge til en test for å matche kun CSS-filer, samt spesifisere hvilke lastere som skal brukes.
test: /\.css$/, ekskluder: / node_modules /, loader: 'style! css'
Den interessante delen av denne kodestykket er 'Stil! Css' linje. Lastere leses fra høyre til venstre, så dette forteller Webpack å først lese stilene til hvilken som helst fil som slutter .css, og injiser deretter de stilene i vår side.
Fordi vi har oppdatert konfigurasjonsfilen vår, må vi starte opp utviklingsserveren for at våre endringer skal hentes. Bruk ctrl + c å stoppe serveren og Webpack-dev-serveren å starte det igjen.
Alt vi trenger å gjøre nå er å kreve vårt stilark fra vår side main.js fil. Vi gjør dette på samme måte som vi ville noen annen JavaScript-modul:
Accentsconagua
const sayHello = krever ('./ say-hallo'); kreve (' ./ stiler / main.css'); sayHello ('Guybrush', document.querySelector ('h2'));Legg merke til hvordan vi ikke engang har rørt index.html. Åpne nettleseren din for å se siden med stylet h2. Endre farge på overskriften i stilarket ditt for å se det øyeblikkelig oppdatering uten oppdatering. Herlig.
"Men ingen bruker CSS disse dager, bestemor! Det handler om Sass". Selvfølgelig er det det. Heldigvis har Webpack en laster for å gjøre bare tingen. Installer den sammen med nodeversjonen av Sass ved å bruke:
npm installer sass-loader node-sass
Oppdater deretter webpack.config.js:
test: /\.scss$/, ekskluder: / node_modules /, loader: 'style! css! sass'
Dette sier nå at for alle filer som slutter med .SCSS, konvertere Sass til vanlig CSS, les stilene fra CSS, og sett deretter inn stilene i siden. Husk å gi nytt navn main.css til main.scss, og krever den nylig navngitte filen i stedet. Først noen Sass:
$ bakgrunn: blå; h2 bakgrunn: $ background; farge: gul;
Så main.js:
kreve (' ./ stiler / main.scss');Super. Det er like enkelt som det. Ingen konvertering og lagring av filer, eller til og med å se på mapper. Vi krever bare i våre Sass-stiler direkte.
"Så bilder, lastere også jeg vedder?" Selvfølgelig! Med bilder ønsker vi å bruke urllasteren. Denne lasteren tar den relative nettadressen til bildet ditt og oppdaterer banen slik at den er riktig inkludert i filpakken. Som vanlig:
npm installer url-loader
Nå, la oss prøve noe annerledes i vår webpack.config.js. Legg til en annen oppføring i lasteapparat-arrayet på vanlig måte, men denne gangen vil vi at det vanlige uttrykket skal samsvare med bilder med forskjellige filutvidelser:
test: /\.(jpg|png|gif)$/, inkluderer: / bilder /, loader: 'url'
Merk den andre forskjellen her. Vi bruker ikke utelukke nøkkel. I stedet bruker vi inkludere. Dette er mer effektivt som det forteller webpack å ignorere alt som ikke samsvarer med en mappe som heter "bilder".
Vanligvis bruker du et slags templeringssystem for å lage HTML-visningene dine, men vi skal holde det grunnleggende og lage en bildemerke i JavaScript den gammeldags måten. Først opprett et bildeelement, sett det nødvendige bildet til src-attributten, og legg deretter elementet til siden.
var imgElement = document.createElement ('img'); imgElement.src = krever ('./ images / my-image.jpg'); document.body.appendChild (imgElement);Gå tilbake til nettleseren for å se bildet ditt fremfor dine øyne!
En annen oppgave som ofte utføres under utvikling, er linting. Linting er en måte å se etter potensielle feil i koden din sammen med å kontrollere at du har fulgt visse kodende konvensjoner. Ting du kanskje vil se etter er "Har jeg brukt en variabel uten å erklære det først?" eller "Har jeg glemt et semikolon på slutten av en linje?" Ved å håndheve disse reglene kan vi utrydde dumme feil tidlig.
Et populært verktøy for linting er JSHint. Dette ser på koden vår og fremhever potensielle feil vi har gjort. JSHint kan kjøres manuelt på kommandolinjen, men det blir raskt en rolle i utviklingen. Ideelt sett vil vi at den skal kjøre automatisk hver gang vi lagrer en fil. Vår Webpack-server overvåker allerede for endringer, så ja, du gjettet det - en annen laster.
Installer jshint-lasteren på vanlig måte:
npm installere jshint-loader
Igjen må vi fortelle Webpack å bruke den ved å legge den til vår webpack.config.js. Denne lasteren er imidlertid litt annerledes. Det er egentlig ikke å forvandle noen kode, det er bare å se. Vi vil heller ikke at alle våre tyngre kodemodifiserende lastere skal løpe og feile, bare fordi vi har glemt et semikolon. Det er her før lastebilene kommer inn. En forhåndslaster er en laster vi spesifiserer for å løpe før våre hovedoppgaver. De er lagt til vår webpack.conf.js på samme måte som lastere.
modul: preLadere: [test: /\.js$/, ekskluder: / node_modules /, loader: 'jshint'], lastere: [...]
Nå løper vår linting-prosess og mislykkes umiddelbart hvis det oppdages et problem. Før vi starter på nytt vår webserver, må vi fortelle JSHint at vi bruker ES6, ellers vil det mislykkes når det ser konst søkeord vi bruker.
Etter modulnøkkelen i vår config, legg til en annen oppføring kalt "jshint" og en linje for å spesifisere versjonen av JavaScript.
modul: preLoaders: [...], loaders: [...], jshint: esversion: 6
Lagre filen og start den på nytt Webpack-dev-serveren. Kjører ok? Flott. Dette betyr at koden din ikke inneholder noen feil. La oss introdusere en ved å fjerne et semikolon fra denne linjen:
var imgElement = document.createElement ('img')Igjen, lagre filen og se på terminalen. Nå får vi dette:
ADVARSEL i ./main.js jshint resulterer i feil Mangler semikolon. @ linje 7 charger 47
Takk, JSHint!
Nå som vi er glade, vår kode er i form og det gjør alt vi ønsker det, vi må gjøre det klart for den virkelige verden. En av de vanligste tingene å gjøre når du lager koden din, er å redusere den, sammenkoble alle filene dine til en og deretter komprimere den inn i den minste filen mulig. Før vi fortsetter, ta en titt på din nåværende bundle.js. Den er lesbar, har massevis av hvite plasser, og er 32kb i størrelse.
"Vent! Ikke fortell meg. En annen laster, ikke sant?" Nei! På denne sjeldne anledningen trenger vi ikke en laster. Webpack har minifunksjon bygget rett inn. Når du er fornøyd med koden din, kjør du bare denne kommandoen:
webpack -p
De -p flagg forteller Webpack for å få koden klar til produksjon. Som det genererer buntet, optimaliserer det så mye som mulig. Etter å ha kjørt denne kommandoen, åpne bundle.js og du ser at alt er blitt knust sammen, og at selv med så lite kode har vi lagret 10kb.
Jeg håper at denne todelte opplæringen har gitt deg nok tillit til å bruke Webpack i dine egne prosjekter. Husk at hvis det er noe du vil gjøre i din prosess, så er det veldig sannsynlig at Webpack har en laster for den. Alle lastere er installert via npm, så ta en titt der for å se om noen allerede har gjort det du trenger.
Ha det gøy!
