# Build Systeem

Chamilo gebruikt **Webpack 5** via **Symfony Webpack Encore** voor het bouwen van frontend-assets. De volledige bouwconfiguratie bevindt zich in `webpack.config.js` in de hoofdmap van het project.

De uitvoer wordt geschreven naar `public/build/` en wordt aangeboden onder het publieke pad `/build`.

## Ingangspunten

### JavaScript

| Ingang                    | Bron                                   | Doel                                          |
| ------------------------- | -------------------------------------- | --------------------------------------------- |
| `vue`                     | `assets/vue/main.js`                   | Hoofd Vue 3-applicatie                        |
| `vue_installer`           | `assets/vue/main_installer.js`         | Installatiewizard                             |
| `legacy_app`              | `assets/js/legacy/app.js`              | Verouderde JavaScript                         |
| `legacy_exercise`         | `assets/js/legacy/exercise.js`         | Oefeningspeler                                |
| `legacy_lp`               | `assets/js/legacy/lp.js`               | Leerpadspeler                                 |
| `legacy_document`         | `assets/js/legacy/document.js`         | Documentviewer                                |
| `legacy_free-jqgrid`      | `assets/js/legacy/free-jqgrid.js`      | Verouderde grid-widget                        |
| `legacy_framereadyloader` | `assets/js/legacy/frameReadyLoader.js` | Frame-ready loader voor verouderde iframes    |
| `translatehtml`           | `assets/js/translatehtml.js`           | HTML-vertaalhulp                              |
| `glossary_auto`           | `assets/js/glossary-auto.js`           | Automatische markering van woordenlijsttermen |

### CSS

| Ingang               | Bron                             |
| -------------------- | -------------------------------- |
| `app`                | `assets/css/app.scss`            |
| `css/chat`           | `assets/css/chat.scss`           |
| `css/document`       | `assets/css/document.scss`       |
| `css/editor`         | `assets/css/editor.scss`         |
| `css/editor_content` | `assets/css/editor_content.scss` |
| `css/markdown`       | `assets/css/markdown.scss`       |
| `css/print`          | `assets/css/print.scss`          |
| `css/responsive`     | `assets/css/responsive.scss`     |
| `css/scorm`          | `assets/css/scorm.scss`          |

## Bouwfunctionaliteiten

* **Vue 3 SFC** — `.vue` single file components gecompileerd door `vue-loader`; runtime compiler is uitgeschakeld (`runtimeCompilerBuild: false`), dus alle templates moeten vooraf worden gecompileerd
* **TypeScript** — Alleen transpilatiemodus (`transpileOnly: true`) voor snelle builds, geen typecontrole tijdens het bouwen
* **Sass/SCSS** — Volledige SCSS-ondersteuning via `sass-loader`
* **Tailwind CSS** — Utility-first CSS inline verwerkt via PostCSS (geconfigureerd in `webpack.config.js`; er is geen apart `postcss.config.js`)
* **Babel** — ES6+ transpilatie met `@babel/preset-env` en `core-js@3` polyfills (`useBuiltIns: "usage"`)
* **jQuery auto-provision** — `autoProvidejQuery()` maakt `$` en `jQuery` globaal beschikbaar zonder expliciete imports, ter ondersteuning van verouderde code
* **Source maps** — Alleen ingeschakeld in ontwikkeling
* **Single runtime chunk** — Gedeelde runtime voor alle ingangspunten
* **Filesystem cache** — Webpack's persistente bestandssysteemcache is ingeschakeld om incrementele rebuilds te versnellen
* **Chunk namespacing** — `output.uniqueName` en `output.chunkLoadingGlobal` zijn ingesteld op `"chamilo"` / `"webpackChunkChamilo"` om conflicten bij het laden van chunks te vermijden wanneer meerdere Webpack-bundles op een pagina naast elkaar bestaan

## Alleen voor productie

* **Versiebeheer** — Content-hash achtervoegsels op alle uitvoerbestandsnamen (`enableVersioning()`)
* **Subresource Integrity** — `integrity`-attributen op `<script>` en `<link>` tags (`enableIntegrityHashes()`)
* **Opschoning uitvoer** — `public/build/` wordt vóór elke productiebouw gewist

### Ongehashte kopieën van assets (`CopyUnhashedAssetsPlugin`)

Sommige verouderde PHP-pagina's verwijzen naar assets met een vaste bestandsnaam en kunnen de Webpack-manifest niet gebruiken. Een aangepaste `CopyUnhashedAssetsPlugin` (gedefinieerd onderaan `webpack.config.js`) kopieert bepaalde gehashte productiebestanden naar een extra ongehasht pad na elke build:

| Gehasht bestand                              | Ongehashte kopie                      |
| -------------------------------------------- | ------------------------------------- |
| `legacy_document.[hash].js`                  | `legacy_document.js`                  |
| `legacy_exercise.[hash].js`                  | `legacy_exercise.js`                  |
| `legacy_framereadyloader.[hash].js` / `.css` | `legacy_framereadyloader.js` / `.css` |
| `css/document.[hash].css`                    | `css/document.css`                    |
| `css/editor_content.[hash].css`              | `css/editor_content.css`              |
| `glossary_auto.[hash].js`                    | `glossary_auto.js`                    |

## Gekopieerde bibliotheekassets

`copyFiles()` kopieert een aantal npm-pakketten rechtstreeks naar `public/build/libs/` zonder ze te bundelen, voor gebruik via `<script>` / `<link>` tags in verouderde templates:

* `flatpickr` (JS + CSS + locales)
* `chart.js`
* `mediaelement` + `mediaelement-plugins`
* `moment` locales
* `select2` (JS + CSS)
* `qtip2`
* `readmore-js`
* `js-cookie`
* `pwstrength-bootstrap`
* `multiselect-two-sides`

## Bouwopdrachten

```bash
# Ontwikkelingsbouw
yarn encore dev

# Ontwikkelingsbouw met bestandswatching
yarn encore dev --watch

# Productiebouw (gecomprimeerd, versiebeheer, integriteitshashes)
yarn encore production
```

***

## Tailwind Configuratie

Tailwind is geconfigureerd in `tailwind.config.js`. Belangrijke punten:

* **`important: true`** — Alle gegenereerde hulpprogrammaclasses bevatten `!important`, waardoor ze de stijlen van PrimeVue-componenten kunnen overschrijven zonder extra specificiteitstrucs
* **Inhoudspaden** — Tailwind scant `assets/**/*.{js,vue}`, `public/main/**/*.{php,twig,tpl}`, `public/plugin/**/*.{php,twig,tpl}` en `src/CoreBundle/Resources/views/**/*.html.twig` op het gebruik van klassen
* **CSS-variabele kleursysteem** — Elke kleurtoken (primair, secundair, tertiair, succes, info, waarschuwing, gevaar) wordt ondersteund door een aangepaste CSS-eigenschap (bijv. `--color-primary-base`), gedefinieerd per thema in `var/themes/[theme-name]/colors.css`. Waarden zijn ruimtegescheiden RGB-kanaaldriehoeken, wat Tailwind-dekkinghulpprogramma's mogelijk maakt (`bg-primary/50`)
* **Aangepaste lettertypeschaal** — `body-1`, `body-2`, `caption`, `tiny` grootte/lijnafstand-paren worden toegevoegd via `theme.extend.fontSize`
* **Plugins** — `@tailwindcss/forms` en `@tailwindcss/typography` zijn ingeschakeld

PostCSS (Tailwind + Autoprefixer) is inline geconfigureerd binnen `webpack.config.js` via `enablePostCssLoader()` — er is geen apart `postcss.config.js`-bestand.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chamilo.org/2.x-nl/ontwikkelaarsgids/developer-guide/frontend/build-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.