Komma igång med Webpack [med exempelprojekt]

Webpack är en modulbuntaren som underlättar byggandet av komplexa JavaScript-applikationer. Det har fått allvarlig dragkraft eftersom React community valde det som huvudverktyg. Webpack är varken en paketchef eller en arbetslöpare eftersom det använder ett annat (mer avancerat) tillvägagångssätt, men dess mål är också att skapa en dynamisk byggprocess.

Webpack fungerar med vanilj JavaScript. Du kan använda den till buntar de statiska tillgångarna i en applikation, som bilder, teckensnitt, stylesheets, skript i en enda fil medan ta hand om alla beroenden.

Du behöver inte Webpack för att skapa en enkel app eller hemsida, till exempel en som bara har en JavaScript och en CSS-fil och några bilder, men det kan vara en livräddare för en mer komplicerad applikation med flera tillgångar och beroenden.

Webpack vs uppgiftslöpare vs Browserify

Så, hur stackar Webpack upp jämfört med andra byggverktyg som Grunt, Gulp eller Browserify?

Grunt och Gulp är arbetslöpare. I sin konfigurationsfil, du ange uppgifterna, och uppdragsrunner utför dem. De arbetsflöde av en arbetslöpare ser i princip ut så här:

Webpack är dock en modulbuntaren som analyserar hela projektet, ställer in ett beroende träd, och skapar en buntad JavaScript-fil att det tjänar till webbläsaren.

Browserify är närmare Webpack än task runners, liksom det också skapar ett beroende diagram men det gör det bara för JavaScript-moduler. Webpack går ett steg längre, och det paketerar inte bara källkod men även övriga tillgångar till exempel bilder, stylesheets, typsnitt, etc..

Om du vill veta mer om hur Webpack jämför med andra byggverktyg, Jag rekommenderar dig två artiklar:

Andrew Rays Webpack: När du ska använda och varför på sin egen blogg
Cory House Browserify vs Webpack på freeCodeCamp (med fantastiska illustrationer)

De två illustrationerna ovan är från Webpack-material i Pro React-handboken, en annan resurs som är värt en titt.

Fyra grundläggande begrepp för Webpack

Webpack har fyra huvudkonfigurationsalternativ som heter “kärnkoncept” som du måste definiera i utvecklingsprocessen:

Inträde - de utgångspunkt av beroendegrafen (en eller flera JavaScript-filer).
Produktion - filen där du vill ha utgång som ska buntas till (en JavaScript-fil).
lastmaskiner - omvandlingar på tillgångarna som gör dem till Webpack-moduler så att de kan vara läggas till beroende diagrammet. Till exempel, css-loader används för import av CSS-filer.
plugins - anpassade åtgärder och funktioner utförd på buntet. Till exempel, i18n-Webpack-plugin inleder lokalisering i buntet.

Lastare arbetar på per-fil basis innan samlingen äger rum. Plugins exekveras på den kodade koden, i slutet av samlingsprocessen.

Installera Webpack

Till installera Webpack, öppna kommandoraden, navigera till din projektmapp och kör följande kommando:

 npm init

Om du inte vill göra konfigurationen själv kan du göra npm fylla i package.json filen med standardvärdena med följande kommando:

 npm init -y

Installera sedan Webpack:

 npm installera webpack - save-dev

Om du har använt standardvärdena så här är din package.json filen ska se ut nu (egenskaperna kan vara i en annan ordning):

 "namn": "_test", "version": "1.0.0", "beskrivning": "", "huvud": "webpack.config.js", "beroenden": "webpack" .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," skript ": " test ":" echo \ "Fel: inget test specificerat \" && avsluta 1 "," nyckelord ": []," författare ":" "," licens ":" ISC "

Skapa konfigurationsfilen

Du måste skapa en webpack.config.js fil i projektets rotmapp. Den här konfigurationsfilen har en central roll, eftersom det är här du vill definiera de fyra grundläggande begreppen (inträdespunkter, utgångar, laddare, plugins).

De webpack.config.js fil har ett konfigurationsobjekt av vilka egenskaper du behöver specificera. I den här artikeln kommer vi att ange de fyra egenskaperna som motsvarar de fyra grundläggande begreppen (inträde, produktion, modul, och plugin), men config-objektet har också andra egenskaper.

1. Skapa ingångspunkten

Du kan ha ett eller flera inträdespunkter. Du måste definiera dem i inträde fast egendom.

Sätt in följande kodbit i webpack.config.js fil. Det anger en ingångspunkt:

 module.exports = entry: "./src/script.js";

För att ange mer än en entré kan du använda antingen matrisen eller objektsyntaxen.

I din projektmapp, skapa en ny src mapp och a script.js filen inuti den. Det här blir din inkörsport. För teständamål, bara placera en sträng innuti. Jag använde följande (men du kan också använda en mer intressant):

 const greeting = "Hej. Jag är ett Webpack-startprojekt."; document.write (hälsning);

2. Definiera utgången

Du kan ha bara en utdatafil. Webpack buntar alla tillgångar i den här filen. Du måste konfigurera produktion egendom på följande sätt:

 const path = kräver ("path"); module.exports = entry: "./src/script.js", output: filnamn: "bundle.js", sökväg: path.resolve (__ dirname, 'dist');

De filnamn egendom definierar namnet på den bifogade filen, medan väg fast egendom specificerar namnet på katalogen. Exemplet ovan kommer att skapa /dist/bundle.js fil.

Även om det inte är obligatoriskt, är det bättre att Använd path.resolve () metod när du definierar väg egendom, som det säkerställer korrekt modulupplösning (den absoluta vägen för utgången skapas enligt olika regler i olika miljöer, modulupplösning löser denna skillnad). Om du använder path.resolve, du behöver fordra de väg Nodmodul på toppen av webpack.config.js fil.

3. Lägg till lastare

Till lägg till lastare, du måste definiera modul fast egendom. Nedan lägger vi till babel-loader som tillåter dig att Använd säkert ECMAScript 6-funktionerna i dina JS-filer:

 const path = kräver ("path"); module.exports = entry: "./src/script.js", output: filnamn: "bundle.js", sökväg: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, utesluta: / (node_modules | bower_components) /, använd: loader: "babel-loader", alternativ: presets: ["env"]];

Konfigureringen kan verka svårt men den kopieras bara av Babel Loader dokumentation. De flesta lastare har antingen en readme-fil eller någon form av dokumentation, så du kan (nästan) alltid veta hur du konfigurerar dem ordentligt. Och Webpack-dokumenten har också en sida som förklarar hur man konfigurerar module.rules.

Du kan lägga till så många lastare som du behöver, Här är den fullständiga listan. Observera att du också behöver installera varje laddare med npm för att få dem att fungera. För Babel-laddaren måste du installera de nödvändiga nodpaketen med npm:

 npm installera - save-dev babel-loader babel-core babel-preset-env webpack

Om du tittar på din package.json fil, du kommer se det npm lade till tre Babel-relaterade paket till devDependencies fast egendom, Dessa kommer att ta hand om ES6-samlingen.

4. Lägg till plugins

Till lägg till plugin, Du måste ange plugin-program fast egendom. Dessutom måste du också fordra pluginsna en efter en, som de är externa moduler.

I vårt exempel lägger vi till två Webpack plugins: the HTML Webpack plugin och den Preload Webpack plugin. Webpack har a trevligt plugin ekosystem, Du kan bläddra i hela listan här.

Att kräva plugins som nodmoduler, skapa två nya konstanter: HtmlWebpackPlugin och PreloadWebpackPlugin och Använd fordra() fungera.

 const path = kräver ("path"); const HtmlWebpackPlugin = kräver ("html-webpack-plugin"); const PreloadWebpackPlugin = kräver ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", output: filnamn: "bundle.js", sökväg: path.resolve (__ dirname, 'dist'), modul: rules: [test : /\.js$/, utesluta: / (node_modules | bower_components) /, använd: loader: "babel-loader", alternativ: presets: ["env"]], plugins: [new HtmlWebpackPlugin (), ny PreloadWebpackPlugin ()];

Precis som i fallet med lastare, måste du också installera Webpack plugins med npm. För att installera de två pluginsna i exemplet, kör följande två kommandon i kommandoraden:

 npm installera html-webpack-plugin - save-dev npm installera - save-dev preload-webpack-plugin

Om du kontrollerar din package.json fil nu, du kommer se det npm lagt till de två plugins till devDependencies fast egendom.

Kör Webpack

Till skapa beroendet träd och mata ut buntet, kör följande kommando i kommandoraden:

 Webpack

Det brukar tar ett eller två minuter för Webpack att bygga projektet. När du är klar ser du ett liknande meddelande i din CLI:

Om allt gick rätt Webpack skapade a dist mapp i roten till ditt projekt och placerade de två buntade filerna (bundle.js och index.html) innuti.

Github repo

Om du vill kolla in, ladda ner eller gaffel hela projektet, ta en titt på vårt Github repo.