<commit_before>---
date: '2018-03-07 16:08 +0100'
published: true
title: Webpack - Koncept
---
Wwebpack är en statisk modulbuntare för moderna JavaScript-applikationer.

När webpack behandlar din applikation bygger den rekursivt en beroendegraf som innehåller alla moduler som din applikation behöver, och sedan paketerar alla dessa moduler i en eller flera buntar.

För att komma igång behöver du bara förstå fyra grundläggande begrepp:

* Entry
* Output
* Loaders
* Plugins

Detta dokument är avsett att ge en överblick över dessa begrepp på hög nivå,

## Entry

En entry anger vilket modulpaket som ska användas för att börja bygga upp det interna beroendet. Efter att ha kommit in i entry kommer webpack att ta reda på vilka andra moduler och bibliotek som entry beror på (direkt och indirekt). Varje beroende beräknas sedan och utmatas i filer som kallas buntar.

Du kan ange en entry (eller flera) genom att konfigurera entry segenskapen i webpackkonfigurationen.

**webpack.config.js**
```js
module.exports = {
    entry: './path/to/my/entry/file.js'
}
```

*Du kan konfigurera entry på olika sätt beroende på behoven hos din applikation*

## Output

Output berättar för webpack var buntarna hamnar och hur desssa ska namnges. Du kan konfigurera denna del av processen genom att ange ett `output` i din konfiguration:

**webpack.config.js**
```js
const path = require('path')

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    }
}
```

I exemplet ovan använder vi `output.filename` och `output.path` för att berätta för webpack namnet på vårt paket och där vi vill att det ska skickas till.

## Loaders

Laddare gör det möjligt för webpack att bearbeta mer än bara JavaScript-filer (webpacken förstår bara JavaScript). De ger dig möjligheten att utnyttja webpacks samlingsfunktioner för alla typer av filer genom att konvertera dem till giltiga moduler som webpack kan hantera.

I huvudsak omvandlar webpack-laddare alla typer av filer till moduler som kan ingå i applikationenens beroendegraf (och så småningom en bundle).

*Observera att möjligheten att importera vilken typ av modul som helst, t.ex. .css-filer, är en funktion som är specifik för webpack och kanske inte stödjas av andra buntare eller uppgiftslöpare. Vi anser att denna förlängning av språket är motiverat eftersom det tillåter utvecklare att bygga en mer exakt beroendestruktur.*

På hög nivå har laddare två ändamål i din webpackkonfiguration:

1 `test` egenskapen identifierar vilken fil eller filer som ska transformeras.
2 `use` egenskapen anger vilken laddare som ska användas för att göra transformationen.<commit_msg>Create 2018-03-07-webpack-koncept.md<commit_after>---
date: '2018-03-07 16:08 +0100'
published: true
title: Webpack - Koncept
---
Wwebpack är en statisk modulbuntare för moderna JavaScript-applikationer.

När webpack behandlar din applikation bygger den rekursivt en beroendegraf som innehåller alla moduler som din applikation behöver, och sedan paketerar alla dessa moduler i en eller flera buntar.

För att komma igång behöver du bara förstå fyra grundläggande begrepp:

* Entry
* Output
* Loaders
* Plugins

Detta dokument är avsett att ge en överblick över dessa begrepp på hög nivå,

## Entry

En entry anger vilket modulpaket som ska användas för att börja bygga upp det interna beroendet. Efter att ha kommit in i entry kommer webpack att ta reda på vilka andra moduler och bibliotek som entry beror på (direkt och indirekt). Varje beroende beräknas sedan och utmatas i filer som kallas buntar.

Du kan ange en entry (eller flera) genom att konfigurera entry segenskapen i webpackkonfigurationen.

**webpack.config.js**
```js
module.exports = {
    entry: './path/to/my/entry/file.js'
}
```

*Du kan konfigurera entry på olika sätt beroende på behoven hos din applikation*

## Output

Output berättar för webpack var buntarna hamnar och hur desssa ska namnges. Du kan konfigurera denna del av processen genom att ange ett `output` i din konfiguration:

**webpack.config.js**
```js
const path = require('path')

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    }
}
```

I exemplet ovan använder vi `output.filename` och `output.path` för att berätta för webpack namnet på vårt paket och där vi vill att det ska skickas till.

## Loaders

Laddare gör det möjligt för webpack att bearbeta mer än bara JavaScript-filer (webpacken förstår bara JavaScript). De ger dig möjligheten att utnyttja webpacks samlingsfunktioner för alla typer av filer genom att konvertera dem till giltiga moduler som webpack kan hantera.

I huvudsak omvandlar webpack-laddare alla typer av filer till moduler som kan ingå i applikationenens beroendegraf (och så småningom en bundle).

*Observera att möjligheten att importera vilken typ av modul som helst, t.ex. .css-filer, är en funktion som är specifik för webpack och kanske inte stödjas av andra buntare eller uppgiftslöpare. Vi anser att denna förlängning av språket är motiverat eftersom det tillåter utvecklare att bygga en mer exakt beroendestruktur.*

På hög nivå har laddare två ändamål i din webpackkonfiguration:

1 `test` egenskapen identifierar vilken fil eller filer som ska transformeras.
2 `use` egenskapen anger vilken laddare som ska användas för att göra transformationen.

**webpack.config.js**
```js
const path = require('path')

const config = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    },
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }
        ]
    }
}

module.exports = config
```
{'fraction_non_alphanumeric': 0.06722689075630252, 'fraction_numerical': 0.007545875493054364, 'mean_word_length': 4.129287598944591, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5280649', 'n_tokens_mistral': 2011, 'n_tokens_neox': 1955, 'n_words': 771}