Share
Het is vrij standaardpraktijk tegenwoordig om een website te bouwen met een soort bouwproces om ontwikkeltaken uit te voeren en je bestanden voor te bereiden op een live omgeving.
Je kunt hiervoor Grom of Gulp gebruiken, een reeks transformaties construeren die je toestaan om je code in één kant te gooien en wat verkleinde CSS en JavaScript eruit te halen bij de andere.
Deze tools zijn enorm populair en erg handig. Er is echter een andere manier om dingen te doen, en dat is om Webpack te gebruiken.
Webpack is wat bekend staat als een "modulebundelaar". Het neemt JavaScript-modules, begrijpt hun afhankelijkheden en voegt ze vervolgens op de meest efficiënte manier samen, waarbij ze aan het einde één JS-bestand uitspuugt. Niets bijzonders, toch? Dingen als RequireJS doen dit al jaren.
Nou, hier is de draai. Met Webpack zijn modules niet beperkt tot JavaScript-bestanden. Door Loaders te gebruiken, begrijpt Webpack dat een JavaScript-module een CSS-bestand nodig heeft en dat voor dit CSS-bestand mogelijk een afbeelding vereist is. De uitgevoerde items bevatten alleen precies wat nodig is met minimale gedoe. Laten we ons opstellen zodat we dit in actie kunnen zien.
Zoals met de meeste ontwikkeltools, moet je Node.js geïnstalleerd hebben voordat je verder kunt gaan. Ervan uitgaande dat u dit correct hebt ingesteld, hoeft u alleen maar het volgende te typen om Webpack te installeren op de opdrachtregel.
npm webpack -g installeren
Hiermee wordt Webpack geïnstalleerd en kunt u het vanaf elke locatie op uw systeem uitvoeren. Maak vervolgens een nieuwe map en maak binnenin een eenvoudig HTML-bestand zoals:
Webpackplezier
Het belangrijkste onderdeel hier is de verwijzing naar bundle.js, dat is wat Webpack voor ons gaat maken. Let ook op het H2-element - dat zullen we later gebruiken.
Maak vervolgens twee bestanden in dezelfde map als uw HTML-bestand. Noem de eerste main.js, wat je je kunt voorstellen, is het belangrijkste toegangspunt voor ons script. Geef de tweede een naam zeggen-hello.js. Dit wordt een eenvoudige module die de naam en het DOM-element van een persoon gebruikt en een welkomstbericht in het element invoegt.
// say-hello.js module.exports = functie (naam, element) element.textContent = 'Hallo' + naam + '!'; ;
Nu we een eenvoudige module hebben, kunnen we dit verplicht stellen en van daaruit oproepen main.js. Dit is net zo eenvoudig als het doen:
Accentsconagua
var sayHello = require ('./ say-hello'); sayHello ('Guybrush', document.querySelector ('h2'));Als we nu ons HTML-bestand openen, wordt dit bericht natuurlijk niet weergegeven omdat we het niet hebben opgenomen main.js noch de afhankelijkheden voor de browser gecompileerd. Wat we moeten doen is Webpack laten bekijken main.js en kijk of het afhankelijkheden heeft. Als dat het geval is, moet het samen worden gecompileerd en een bundle.js-bestand maken dat we in de browser kunnen gebruiken.
Ga terug naar de terminal om Webpack uit te voeren. Type gewoon:
webpack main.js bundle.js
Het eerste opgegeven bestand is het invoerbestand dat we willen dat Webpack op zoek gaat naar afhankelijkheden. Het zal uitwerken of de vereiste bestanden andere bestanden nodig hebben en dit blijven doen tot het alle noodzakelijke afhankelijkheden heeft uitgewerkt. Als dit is voltooid, worden de afhankelijkheden als één aaneengeschakeld bestand naar bundle.js. Als je op Return drukt, zou je zoiets als dit moeten zien:
Hash: 3d7d7339a68244b03c68 Versie: webpack 1.12.12 Tijd: 55 ms Asset-grootte Chunks Chunk-namen bundle.js 1.65 kB 0 [uitgezonden] hoofd [0] ./main.js 90 bytes 0 [gebouwd] [1] ./ag- hello.js 94 bytes 0 [gebouwd]
Nu open index.html in je browser om je pagina hallo te zien zeggen.
Het is niet leuk om onze invoer- en uitvoerbestanden te specificeren telkens als we Webpack uitvoeren. Gelukkig kunnen we met Webpack een configuratiebestand gebruiken om ons de moeite te besparen. Maak een bestand met de naam webpack.config.js in de root van uw project met de volgende inhoud:
module.exports = entry: './main.js', output: filename: 'bundle.js';
Nu kunnen we gewoon typen webpack en niets anders om dezelfde resultaten te bereiken.
Wat is dat? Je kunt niet eens de moeite nemen om te typen webpack elke keer dat je een bestand verandert? Ik weet het niet, de huidige generatie enz., Enz. Laten we een kleine ontwikkelserver opzetten om de zaken nog efficiënter te maken. Schrijf op de terminal:
npm installeer webpack-dev-server -g
Voer vervolgens het commando uit webpack-dev-server. Hiermee wordt een eenvoudige webserver gestart, waarbij de huidige map wordt gebruikt als de plaats waar de bestanden worden aangeboden. Open een nieuw browservenster en bezoek http: // localhost: 8080 / webpack-dev-server /. Als alles goed gaat, zie je iets in de trant van dit:
Nu hebben we niet alleen een leuke kleine webserver, we hebben er een die onze code bekijkt op veranderingen. Als het ziet dat we een bestand hebben gewijzigd, voert het automatisch de opdracht webpack uit om onze code te bundelen en de pagina te verversen zonder dat we iets hoeven te doen. Allemaal met nulconfiguratie.
Probeer het uit, verander de naam doorgegeven aan de zeg hallo functie en keer terug naar de browser om te zien of uw wijziging direct is toegepast.
Een van de belangrijkste kenmerken van Webpack is Loaders. Laders zijn analoog aan "taken" in Grunt en Gulp. Ze nemen in feite bestanden en transformeren ze op een of andere manier voordat ze worden opgenomen in onze gebundelde code.
Stel dat we een deel van de aardigheden van ES2015 in onze code wilden gebruiken. ES2015 is een nieuwe versie van JavaScript die niet in alle browsers wordt ondersteund, dus we moeten een loader gebruiken om onze ES2015-code om te zetten in eenvoudige oude ES5-code die is ondersteund. Om dit te doen, gebruiken we de populaire Babel Loader die, volgens de instructies, zo installeert:
npm installeren babel-loader babel-core babel-preset-es2015 --save-dev
Dit installeert niet alleen de lader zelf, maar de afhankelijkheden ervan en een vooraf ingestelde ES2015-functie, omdat Babel moet weten welk type JavaScript het converteert.
Nu de loader is geïnstalleerd, hoeven we alleen Babel te vertellen dat hij deze moet gebruiken. Bijwerken webpack.config.js dus het ziet er zo uit:
module.exports = entry: './main.js', output: filename: 'bundle.js', module: loaders: [test: /\.js$/, exclude: / node_modules /, loader : 'babel', vraag: presets: ['es2015']],;
Er zijn een paar belangrijke dingen om op te merken hier. De eerste is de regel test: /\.js$/, wat een normale uitdrukking is die ons vertelt om deze loader toe te passen op alle bestanden met een .js uitbreiding. evenzo uitsluiten: / node_modules / vertelt Webpack om het te negeren node_modules directory. lader en vraag zijn redelijk vanzelfsprekend - gebruik de Babel-lader met de ES2015-voorinstelling.
Start uw webserver opnieuw op door op te drukken ctrl + c en rennen webpack-dev-server nog een keer. Het enige wat we nu hoeven te doen, is een ES6-code gebruiken om de transformatie te testen. Hoe zit het met we onze veranderen zeg hallo variabele om een constante te zijn?
const sayHello = require ('./ say-hello')Na het opslaan moet Webpack uw code automatisch opnieuw gecompileerd hebben en uw browser hebben vernieuwd. Hopelijk zie je geen enkele verandering. Neem een kijkje bundle.js en kijk of je de kunt vinden const trefwoord. Als Webpack en Babel hun werk hebben gedaan, zie je het nergens - gewoon oude JavaScript.
In deel 2 van deze tutorial bekijken we hoe u Webpack kunt gebruiken om CSS en afbeeldingen aan uw pagina toe te voegen, en om uw site klaar te maken voor implementatie.
