Webpack

Snippets » JavaScript » NodeJS » Webpack

Webpack

Webpack er en asset bundler til NodeJS. Den kan transpile moderne JavaScript samt minifie JavaScript, CSS m.m. Webpack kan sammenlignes med Gulp og Parcel og er i skrivende stund i version 4. Webpack er primært lavet til brug ved JS-biblioteker som f.eks. React, Vue eller Angular. Skal man have mere statisk / traditionel CSS Webpack nok ikke det oplagte valg til dette.

JS-biblioteket React har været med til at gøre Webpack populært.

Installation

Som alle andre Node Packages installeres dette via kommandolinjen i en mappe, hvor NPM er initieret

npm i webpack webpack-cli --save-dev

Da webpack er installeret lokalt i projektmappen, men ikke globalt kan man ikke bruge kommandoen webpack. Derfor er det en konvention at lave et script i package.json som vist herunder:

"test": "echo \"Error: no test specified\" && exit 1"

erstattes med:

"build": "webpack"

Her efter kan man afvikle Webpack med følgende kommando:

npm run build

På nuværende tidspunkt giver kommandoen en fejl da mappestrukturen ikke er sat op endnu.

Mappestruktur

Webpack 4 kræver ikke en konfigurationsfil som tidligere udgaver af Webpack. Men for at kunne bruge Webpack skal man have en bestemt mappestruktur.

.
+-- node_modules
+-- src
|   +-- index.js

Webpack indlæser automatisk filen index.js i mappen ./src.

Hvis man nu kører kommandoen npm run build vil der blive oprettet mappen ./dist med filen main.js. Det er her JavaScript bliver bundlet i uden anden konfiguration.

Installer Webpack

• Webpack
• Webpack: Modules
• Webpack: config
• Webpack: loaders