Share
In de vorige tutorial leerden we hoe we een Webpack-project konden opzetten en hoe we laders konden gebruiken om ons JavaScript te verwerken. Waar Webpack echt uitblinkt, is dat het in staat is om andere soorten statische elementen zoals CSS en afbeeldingen te bundelen en ze alleen in ons project op te nemen als dat nodig is. Laten we beginnen met het toevoegen van een aantal stijlen aan onze pagina.
Maak eerst een normaal CSS-bestand in een stijldirectory. Kom binnen main.css en voeg een stijlregel toe voor het headingelement.
h2 achtergrond: blauw; kleur geel;
Dus hoe krijgen we dit stylesheet op onze pagina? Nou, zoals de meeste dingen met Webpack, hebben we een andere loader nodig. Twee in feite: css-loader en style-loader. De eerste leest alle stijlen van onze CSS-bestanden, terwijl de andere stijlen in onze HTML-pagina injecteert. Installeer ze als volgt:
npm installeren style-loader css-loader
Vervolgens vertellen we Webpack hoe ze moeten worden gebruikt. In webpack.config.js, we moeten een ander object toevoegen aan de array laders. Daarin willen we een test toevoegen om alleen CSS-bestanden aan te passen en specificeren welke laders moeten worden gebruikt.
test: /\.css$/, exclude: / node_modules /, loader: 'style! css'
Het interessante deel van dit codefragment is het 'Stijl! Css' lijn. Laders worden van rechts naar links gelezen, dus dit vertelt Webpack om eerst de stijlen te lezen van elk bestand dat eindigt op .css, en injecteer die stijlen dan in onze pagina.
Omdat we ons configuratiebestand hebben bijgewerkt, moeten we de ontwikkelserver opnieuw opstarten om onze wijzigingen op te halen. Gebruik ctrl + c om de server te stoppen en webpack-dev-server om het opnieuw te starten.
Het enige wat we nu moeten doen, is ons stylesheet van binnen onze main.js het dossier. We doen dit op dezelfde manier als elke andere JavaScript-module:
Accentsconagua
const sayHello = require ('./ say-hello'); require (' ./ stijlen / main.css'); sayHello ('Guybrush', document.querySelector ('h2'));Merk op hoe we zelfs niet hebben aangeraakt index.html. Open uw browser om de gestileerde pagina te bekijken h2. Wijzig de kleur van de kop in uw stylesheet zodat deze direct wordt bijgewerkt zonder vernieuwing. heerlijk.
"Maar tegenwoordig gebruikt niemand CSS, Grandad! Het draait allemaal om Sass". Natuurlijk is het. Gelukkig heeft Webpack een loader om precies dat te doen. Installeer het samen met de knoopversie van Sass met behulp van:
npm installeer sass-loader node-sass
Update dan webpack.config.js:
test: /\.scss$/, exclude: / node_modules /, loader: 'style! css! sass'
Dit zegt nu dat voor elk bestand dat eindigt op .SCSS, converteer de Sass naar gewone CSS, lees de stijlen uit de CSS en voeg de stijlen vervolgens in de pagina in. Vergeet niet om de naam te wijzigen main.css naar main.scss, en in plaats daarvan moet het nieuwe bestand worden opgegeven. Eerst wat Sass:
$ achtergrond: blauw; h2 achtergrond: $ achtergrond; kleur geel;
Dan main.js:
require (' ./ stijlen / main.scss');Super. Het is zo eenvoudig als dat. Geen bestanden converteren en opslaan, of zelfs mappen bekijken. We hebben alleen rechtstreeks in onze Sass-stijlen nodig.
'Dus beelden, laders ook, wed ik?' Natuurlijk! Met afbeeldingen willen we de url-loader gebruiken. Deze lader neemt de relatieve URL van je afbeelding en werkt het pad bij zodat het correct wordt opgenomen in je bestandsbundel. Als gewoonlijk:
npm url-loader installeren
Laten we nu eens iets anders proberen in onze webpack.config.js. Voeg op de gebruikelijke manier een ander item toe aan de array laders, maar deze keer willen we dat de reguliere expressie afbeeldingen vergelijkt met verschillende bestandsextensies:
test: /\.(jpg|png|gif)$/, include: / images /, loader: 'url'
Let op het andere verschil hier. We gebruiken de uitsluiten sleutel. In plaats daarvan gebruiken we omvatten. Dit is efficiënter omdat het webpack vertelt om alles te negeren dat niet overeenkomt met een map genaamd "images".
Meestal gebruik je een soort sjabloneringssysteem om je HTML-weergaven te maken, maar we houden het eenvoudig en maken een afbeeldingstag in JavaScript op de ouderwetse manier. Maak eerst een afbeeldingselement, stel de vereiste afbeelding in op het kenmerk src en voeg vervolgens het element aan de pagina toe.
var imgElement = document.createElement ('img'); imgElement.src = require ('./ images / my-image.jpg'); document.body.appendChild (imgElement);Ga terug naar je browser om je afbeelding voor je ogen te zien verschijnen!
Een andere taak die gewoonlijk tijdens de ontwikkeling wordt uitgevoerd, is pluizen. Linting is een manier om te letten op mogelijke fouten in uw code, samen met het controleren of u bepaalde coderingsconventies hebt gevolgd. Dingen waar je misschien naar op zoek wilt zijn, zijn "Heb ik een variabele gebruikt zonder het eerst te declareren?" of "Ben ik een puntkomma aan het einde van een regel vergeten?" Door deze regels te handhaven, kunnen we onnozele bugs vroeg uitbannen.
Een populaire tool voor pluizen is JSHint. Dit kijkt naar onze code en wijst op mogelijke fouten die we hebben gemaakt. JSHint kan handmatig worden uitgevoerd op de opdrachtregel, maar dat wordt al snel een hele klus tijdens de ontwikkeling. Idealiter zouden we het graag automatisch laten uitvoeren elke keer dat we een bestand opslaan. Onze Webpack-server let nu al op veranderingen, dus ja, je raadt het al, een andere loader.
Installeer de jshint-loader op de gebruikelijke manier:
npm jshint-loader installeren
Nogmaals, we moeten Webpack vertellen om het te gebruiken door het toe te voegen aan ons webpack.config.js. Deze lader is echter iets anders. Het is eigenlijk geen enkele code aan het veranderen - het is gewoon een kijkje nemen. We willen ook niet dat al onze zwaardere code-modificerende laders worden uitgevoerd en falen, alleen maar omdat we een puntkomma zijn vergeten. Dit is waar preloaders binnenkomen. Een preloader is elke loader die we opgeven om vóór onze hoofdtaken uit te voeren. Ze zijn toegevoegd aan onze webpack.conf.js op een vergelijkbare manier als laders.
module: preLoaders: [test: /\.js$/, exclude: / node_modules /, loader: 'jshint'], loaders: [...]
Ons pluisproces wordt nu uitgevoerd en mislukt onmiddellijk als er een probleem wordt gedetecteerd. Voordat we onze webserver opnieuw opstarten, moeten we JSHint vertellen dat we ES6 gebruiken, anders mislukt het wanneer het de const zoekwoord dat we gebruiken.
Voeg na de moduletoets in onze configuratie een ander item toe met de naam "jshint" en een regel om de JavaScript-versie op te geven.
module: preLoaders: [...], laders: [...], jshint: esversion: 6
Sla het bestand op en start opnieuw webpack-dev-server. Lopen oké? Super goed. Dit betekent dat uw code geen fouten bevat. Laten we een introduceren door een puntkomma van deze regel te verwijderen:
var imgElement = document.createElement ('img')Sla het bestand opnieuw op en kijk naar de terminal. Nu krijgen we dit:
WAARSCHUWING in ./main.js jshint resulteert in fouten Ontbrekende puntkomma. @ regel 7 char 47
Bedankt, JSHint!
Nu we gelukkig zijn, is onze code in vorm en doet alles wat we willen, we moeten het klaar maken voor de echte wereld. Een van de meest voorkomende dingen om te doen wanneer je je code live zet, is door het te verkleinen, al je bestanden samen te voegen en dat vervolgens in het kleinst mogelijke bestand te comprimeren. Voordat we verder gaan, bekijk je huidige bundle.js. Het is leesbaar, heeft veel witruimte en is 32 kB groot.
"Wacht, vertel het me niet. Nog een lader, toch?" Nee! Bij deze zeldzame gelegenheid hebben we geen lader nodig. Webpack heeft een minificatie ingebouwd. Zodra je tevreden bent met je code, voer je gewoon deze opdracht uit:
webpack -p
De -p vlag vertelt Webpack om onze code klaar te maken voor productie. Terwijl het de bundel genereert, optimaliseert het zo veel als het kan. Na het uitvoeren van dit commando, open bundle.js en je zult zien dat alles samen is geplet en dat we zelfs met zo'n kleine hoeveelheid code 10 kB hebben bespaard.
Ik hoop dat deze tweedelige tutorial je voldoende vertrouwen heeft gegeven om Webpack te gebruiken in je eigen projecten. Vergeet niet dat als er iets is dat u wilt doen in uw bouwproces, het zeer waarschijnlijk is dat Webpack er een loader voor heeft. Alle laders worden geïnstalleerd via npm, dus kijk daar of iemand al heeft gemaakt wat je nodig hebt.
Veel plezier!
