Webpack är ett verktyg som kan samla dina JavaScript -filer. Detta gör att du kan bli mer organiserad och produktiv, och även tillåta användning av förbehandlade språk som SASS och TypeScript.
Vad är Webpack för?
Tänk dig att du har arbetat med en webbplats med mycket anpassat JavaScript. Du har varit med om det här projektet ett tag och saker har snabbt gått ur spel. Ditt index.html har 20 olika & lt; script & gt; taggar som alla köper olika filer; vissa är dina egna, vissa är externa resurser du är beroende av. Att hantera dessa är en smärta, särskilt på grund av hur de flesta webbläsare hanterar laddning av JavaScript. Hur ser du till att koden körs efter att jQuery har laddats? Vanligtvis sätter du bara jQuery fysiskt först i HTML -koden, men det är svårt att hantera för många avvikelser.
Det är också frågan om prestanda. Varje skriptfil måste laddas separat. Och för att göra saken värre är det mesta JavaScript-blockering, vilket innebär att din webbplats inte ens kommer att visas förrän den har laddat ner, analyserar och kör JavaScript. Du kan se detta i aktion under fliken Nätverk från Chrome: s Dev -verktyg, som visar förfrågningar som skickas ut. Ju fler förfrågningar du gör, desto längre tid kan det ta för dem alla att slutföra.
Lösningen här är buntning. Istället för att länka till externa resurser laddar du ner dem alla lokalt och inkluderar dem som beroenden för din kod. Webpack buntar ihop det hela till en main.js -fil som innehåller allt din webbplats behöver. Du skulle då helt enkelt inkludera den ena JavaScript -filen och bli av med allt det andra & lt; scriptet & gt; taggar.
Detta låter dig dela koden i flera filer utan att behöva oroa dig för samtidighetsproblem, namnutrymme eller laddningstider. Webpack komprimerar och minskar produktionskoden för att spara ännu mer utrymme.
Webpack hjälper dig att organisera webbplatsens tillgångar
Kort sagt, Webpack låter dig använda funktionen require () för att inkludera ett JavaScript fil i en annan. Detta stöds inte i någon webbläsare, eftersom det är något som måste köras av en JavaScript -paketare som Webpack, Gulp eller Browserify innan du skickar till klienten. Detta kan vara något enkelt, som att importera ett beroende från npm:
var axios = require ('axios') //node_modules/axios/index.js
Eller något mer komplicerat, som att använda bilder i JavaScript:
& lt; img src = {require ('../../assets/logo.png')}/& gt; Annons
I båda fallen skickas strängen i funktionen kräver till Webpack -lastare. Detta är vad som definierar hur Webpack behandlar filer. Till exempel kan vi använda file-loader för att hantera bilder:
{test: /.(png|jpe?g|gif)$/, use: [{loader: 'file-loader', options: { },},],}
Om regex i test matchar filnamnet används laddaren. I det här fallet skulle fil-loader generera en URL enligt din konfiguration baserat på var filen hamnade. När vi nu bygger våra filer skulle img -taggen se mer ut:
& lt; img src = {'https://cdn.yourwebsite.com/img/341234/logo.png'}/& gt;
Detta gör att du kan ha en mycket organiserad filstruktur, eftersom du inte längre behöver oroa dig för filplatser och lägga till mer & lt; script & gt; och & lt; länka & gt; taggar. Det är inte ovanligt, särskilt med ramar som React — att ha projekt som ser ut så här:
src/| _styles/| | _global.css | | _darkTheme.css | _komponenter/| | _styles/| | | _buttonStyles.css | | _button.js | _containers/| | _hemsida.js | | _users.js | _index.js | _app.js | _package.json
Till skillnad från att ha en 2000 rad lång index.js. Detta gör utvecklingen mycket lättare i längden, med lite tidsinvesteringar i början för att övergå till en webbpackbaserad miljö.
Webpack tillåter Du ska använda förprocessorer
Eftersom allt Webpack gör är att vidarebefordra bearbetning av filer till lastare, kan det hända mycket magi i dessa lastare. Du slutar med det som kallas en förbehandlare, som kan lägga till funktioner på språket du arbetar i.
Annonsering
SASS är till exempel en förbehandlare för CSS och lägger till stöd för variabler, häckning, mixningar, import och arv och en massa andra saker. Det är fantastiskt, och det bästa är att det är helt kompatibelt med vanlig CSS, så du behöver inte oroa dig för webbläsarstöd. Slutanvändaren vet aldrig att du använde SASS för att skapa din webbplats, eftersom du förvandlar SASS -koden till CSS -kod när du buntar ihop med webpack.
Ett annat användbart förbehandlat språk är Microsofts TypeScript. TypeScript är en syntaktisk superset av JavaScript — vilket innebär att all JavaScript -kod är giltig TypeScript -kod — och den lägger till stöd för strikta typer, vilket gör JavaScript till ett starkt skrivet språk som C -varianterna. Det är faktiskt ett sammanställt språk med hjälp av tsc-verktyget, men tillägget ts-loader Webpack ger stöd för det. Lastaren kommer att sammanställa dina .ts -filer till .js -filer.
Om du redan är nöjd med vanilj -CSS och JavaScript behöver du inte använda några förbehandlare, men för dem som vill för att använda nästa generations vaniljsyntax, rekommenderade vi att du åtminstone installerar Babel för att stödja ES2015 och senare. Detta gör att du kan använda ES2015 -funktioner som import- och pilfunktioner.
Så här konfigurerar du Webpack
Först måste du ha Node installerad så att du kan köra JavaScript utanför webbläsaren. Sedan kan du installera Webpack från Node Package Manager (npm). Kör dessa kommandon från roten i din projektmapp:
npm init -y npm install webpack –save-dev npm install webpack-cli –save-dev
Detta skapar ett nytt package.json som spårar paket som du har installerat. Du bör se en ny mapp som heter node_modules.
Webpack är nu installerat och du kan köra det med:
npx webpack Advertisement
Detta förutsätter att ingångspunkten för ditt projekt är ./src/index och att du vill att den medföljande filen ska gå i dist/main.js. Om du vill konfigurera din inställning annorlunda eller konfigurera lastare måste du skapa en konfigurationsfil. Det finns många alternativ för dig att använda, och installationen varierar beroende på vad du använder Webpack till, men oftast kommer konfigurationsfilen att placeras vid roten av ditt projekt som webpack.config.js . Du måste ladda detta med –config -flaggan, men du kan automatisera detta genom att ange ett skript i package.json:
“scripts”: {“build”: “webpack –config webpack. config.js “}
Nu, när du kör:
npm run build
Webpack körs och buntar ihop ditt projekt.
Om du inte vill behöva kör “ npm kör build ” efter varje ändring du gör bör du installera webpack-dev-server, som automatiskt byggs om när ändringar görs.