Webpack is een hulpprogramma waarmee u uw JavaScript-bestanden kunt bundelen. Hierdoor kunt u meer georganiseerd en productiever zijn en kunt u ook voorverwerkte talen zoals SASS en TypeScript gebruiken.
Waar is Webpack voor?
Stel je voor dat je aan een website hebt gewerkt met veel aangepast JavaScript. Je bent al een tijdje bezig met dit project en het is snel uit de hand gelopen. Uw index.html heeft 20 verschillende <script> tagt alle sourcing verschillende bestanden; sommige zijn van uzelf, andere zijn externe bronnen waarvan u afhankelijk bent. Het beheren hiervan is lastig, vooral vanwege de manier waarop de meeste browsers omgaan met het laden van JavaScript. Hoe zorgt u ervoor dat uw code wordt uitgevoerd nadat jQuery is geladen? Gewoonlijk zet je jQuery fysiek eerst in de HTML, maar dit is lastig om te beheren voor veel discrepanties.
Er is ook de kwestie van de prestaties. Elk scriptbestand moet apart worden geladen. En om het nog erger te maken, het meeste JavaScript is render-blocking, wat betekent dat uw website niet eens wordt weergegeven totdat het downloaden, parseren en uitvoeren van JavaScript is voltooid. U kunt dit in actie zien op het tabblad Netwerk van Chrome's Dev Tools, dat laat zien dat verzoeken worden verzonden. Hoe meer verzoeken u doet, hoe langer het kan duren voordat ze allemaal zijn voltooid.
De oplossing hier is bundelen. In plaats van te linken naar externe bronnen, zou je ze allemaal lokaal downloaden en ze opnemen als afhankelijkheden van je code. Webpack bundelt alles in één main.js-bestand dat alles bevat wat uw site nodig heeft. Je voegt dan gewoon dat ene JavaScript-bestand toe en verwijdert al het andere <script> tags.
Hiermee kunt u code in meerdere bestanden splitsen zonder dat u zich zorgen hoeft te maken over gelijktijdigheidsproblemen, naamruimteproblemen of laadtijden van de site. Webpack comprimeert en verkleint ook de productiecode om nog meer ruimte te besparen.
Webpack helpt u bij het organiseren van de activa van uw site
Kortom, met Webpack kunt u de functie required() gebruiken om één JavaScript op te nemen bestand in een ander. Dit wordt in geen enkele browser ondersteund, omdat het moet worden uitgevoerd door een JavaScript-bundelprogramma zoals Webpack, Gulp of Browserify voordat het naar de client wordt verzonden. Dit kan iets simpels zijn, zoals het importeren van een afhankelijkheid van npm:
var axios = required('axios') //node_modules/axios/index.js
Of iets ingewikkelder, zoals het gebruik van afbeeldingen in JavaScript:
<img src={ required('../../assets/logo.png') } /> Advertentie
In beide gevallen wordt de tekenreeks in de functie 'vereiste' doorgegeven aan Webpack-laders. Dit is wat definieert hoe Webpack bestanden verwerkt. We kunnen bijvoorbeeld file-loader gebruiken om afbeeldingen te verwerken:
{ test: /.(png|jpe?g|gif)$/, use: [ { loader: 'file-loader', options: { }, }, ], }
Als de regex in test overeenkomt met de bestandsnaam, wordt de loader gebruikt. In dit geval genereert file-loader een URL op basis van uw configuratie op basis van waar dat bestand is terechtgekomen. Als we nu onze bestanden maken, ziet de img-tag er meer uit als:
<img src={ 'https://cdn.yourwebsite.com/img/341234/logo.png' } />
Dit stelt u in staat om een zeer georganiseerde bestandsstructuur te hebben, omdat u zich geen zorgen meer hoeft te maken over bestandslocaties en meer <script> en <link> labels. Het is niet ongebruikelijk, zeker met frameworks zoals React, om projecten te hebben die er als volgt uitzien:
src/|_styles/| |_global.css | |_darkTheme.css |_components/| |_stijlen/| | |_buttonStyles.css | |_button.js |_containers/| |_homepage.js | |_users.js |_index.js |_app.js |_package.json
In tegenstelling tot een 2000 regels lange index.js. Dit maakt ontwikkeling op de lange termijn veel gemakkelijker, met een beetje tijdsinvestering aan het begin om over te stappen naar een webpack-gebaseerde omgeving.
Webpack staat toe U gebruikt preprocessors
Omdat Webpack alleen de verwerking van bestanden doorgeeft aan loaders, kan er veel magie gebeuren in die loaders. Je eindigt met wat een preprocessor wordt genoemd, die functies kan toevoegen aan de taal waarin je werkt.
Advertentie
SASS is bijvoorbeeld een preprocessor voor CSS, die ondersteuning toevoegt voor variabelen, nesting, mix-ins, import en overerving en een heleboel andere dingen. Het is geweldig, en het beste is dat het volledig compatibel is met reguliere CSS, dus je hoeft je geen zorgen te maken over browserondersteuning. De eindgebruiker weet nooit dat je SASS hebt gebruikt om je site te maken, omdat je de SASS-code omzet in CSS-code wanneer je bundelt met webpack.
Een andere handige voorverwerkte taal is Microsoft's TypeScript. TypeScript is een syntactische superset van JavaScript, wat betekent dat alle JavaScript-code geldige TypeScript-code is en het voegt ondersteuning toe voor strikte typen, waardoor JavaScript een sterk getypeerde taal wordt zoals de C-varianten. Het is eigenlijk een gecompileerde taal, die het tsc-hulpprogramma gebruikt, maar de ts-loader Webpack-extensie voegt er ondersteuning voor toe. De loader compileert uw .ts-bestanden naar .js-bestanden.
Als u al tevreden bent met vanilla CSS en JavaScript, hoeft u geen preprocessors te gebruiken, maar voor degenen die dat willen om de next-gen vanilla-syntaxis te gebruiken, raden we u aan ten minste Babel te installeren om ES2015 en hoger te ondersteunen. Hierdoor kunt u ES2015-functies gebruiken, zoals import- en pijlfuncties.
Webpack instellen
Eerst moet Node geïnstalleerd zijn, zodat u JavaScript buiten de browser kunt uitvoeren. Vervolgens kunt u Webpack installeren vanuit Node Package Manager (npm). Voer deze opdrachten uit vanuit de hoofdmap van uw projectmap:
npm init -y npm install webpack –save-dev npm install webpack-cli –save-dev
Hiermee wordt een nieuwe package.json gemaakt die de pakketten die u hebt geïnstalleerd. Je zou een nieuwe map moeten zien met de naam node_modules.
Webpack is nu geïnstalleerd en u kunt het uitvoeren met:
npx webpack Advertisement
Hierbij wordt ervan uitgegaan dat het startpunt voor uw project ./src/index is, en dat u wilt dat het gebundelde bestand gaat in dist/main.js. Als je je setup anders wilt configureren of loaders wilt configureren, moet je een configuratiebestand maken. Er zijn veel opties die u kunt gebruiken, en de instellingen zijn afhankelijk van waarvoor u Webpack gebruikt, maar meestal wordt het configuratiebestand in de hoofdmap van uw project geplaatst als webpack.config.js . U moet dit laden met de vlag –config, maar u kunt dit automatiseren door een script op te geven in package.json:
“scripts”: { “build”: “webpack –config webpack. config.js” }
Nu, wanneer u het volgende uitvoert:
npm run build
Webpack zal uw project uitvoeren en bundelen.
Als u dat niet wilt run “npm run build” na elke wijziging die u aanbrengt, moet u webpack-dev-server installeren, die automatisch opnieuw wordt opgebouwd wanneer wijzigingen worden aangebracht.