> For the complete documentation index, see [llms.txt](https://docs.chamilo.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chamilo.org/2.x-nl/ontwikkelaarsgids/developer-guide/frontend/build-system.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.