JS Bundling
Published: 2023-10-10 06:23:35

En Guide til Brug af Webpack til Webudvikling. 
Webpack er en JavaScript-bundlingstjeneste, der hjælper udviklere med at organisere, optimere og pakke deres JavaScript-filer. Den gør det lettere at administrere afhængigheder og sikrer, at din webapplikation indlæses hurtigt og effektivt. 

**Hvad er Webpack.**
Webpack er en open-source JavaScript-bundler, der hjælper med at håndtere og samle forskellige JavaScript-filer og deres afhængigheder i én eller flere bundter. Dette er især nyttigt i større projekter, hvor du har mange filer, der skal indlæses på forskellige sider. Webpack bruges især til at reducere filstørrelser og linje koder.
 
Med Webpack kan du også håndtere andre typer filer, såsom CSS, billeder og HTML, hvilket gør det til et alsidigt værktøj til webudvikling. Den seneste version af Webpack, på dette tidspunktt, er Webpack 5, som har flere nye funktioner og forbedringer. 

**Installation af Webpack.**
For at komme i gang med Webpack skal du først installere det. Du kan gøre det ved hjælp af npm (Node Package Manager), så sørg for at have Node.js installeret på din computer. Her er trinene:
Åbn en terminal og naviger til din projektmappe. 
Kør følgende commands for at initialisere et nyt npm-projekt. 
npm init -y 
npm install webpack – cli -–save dev 

**Transpile SASS til css.** 
For at transpile SASS til css skal man først installere SASS i visual studio code, det kan man gøre ved hjælp af en Extension eller ved at skrive npm install sass i terminalen, dererfter skal man oprette en mappe struktur for at holde mere styr på koden, efter det skal man gå ind i sin package.json-fil og ændre i sine scripts f.eks med start: ”sass  --watch source:dist”     




**Post css.**
install postCSS You can do this using npm

Create a PostCSS Configuration File: Create a PostCSS configuration file in your project directory. This file defines your PostCSS plugins and their configurations.

Create CSS Source Files: Create your CSS source files in your project directory.

Create a Build Script: Add a build script to your project's package.json file to process your CSS files using PostCSS.

Run the Build Script: Open a terminal in Visual Studio Code and run your build script.

Include the Bundled CSS in Your HTML: Link the bundled CSS file in your HTML file.

**source maps.**
To ensure source maps are made for debugging purposes, you will need to modify webpack configuration: In your webpack.config.js file, add the devtool property and set it to 'source-map'. This tells Webpack to generate source maps for your bundles:

 
module.exports = {

  // other configurations...

  devtool: 'source-map',

};

 

Make sure your PostCSS setup includes source map generation. In your PostCSS configuration file, add the map option set to true.

 

module.exports = {

  // other plugin configurations...

  map: true,

};

 

Modify your SASS script in the package.json by adding the --source-map flag.

 

"scripts": {

  "sass": "sass --watch --source-map true source:dist",

  // other scripts...

}

 

Execute your build scripts again by running npm run build in your terminal. This process will now generate source maps for your CSS files.