# Frontend Webpack Encore, one entry per page, Bootstrap 5, jQuery-based widget classes. ## Layout of `resources/` ``` resources/js/ entries/ one file per page — .js widgets/ widget classes, one per PHP widget, extending Widget.js components/ reusable behaviours that are not widgets services/ SvgLoader.js admin/ admin-only JS jquery-ui-1.13.1.custom/ resources/scss/ entries/ one per JS entry widgets/ one per widget, mirroring its CSS class components/ button, checkbox, dialog, form, photo-zoom, selectize, simple-lightbox, table admin/ variables.scss bootstrap-core.scss bootstrap.scss fontawesome.scss maps.scss animations.scss ``` ## Entries [`webpack.config.js`](../../webpack.config.js) lists **25 entries**, built into `web/build/`: - 22 page entries named `` — `articlesIndex`, `storagesDisplay`, `usersAccount`, … - `common` — always loaded, prepended to every page by `View::getEntryList()` - `admin` — the whole backend, one entry - `ckeditor` The name is **derived, not configured**: `View::getEntryList()` builds it as `$controller->id . Inflector::id2camel( $controller->action->id )`. Adding a page action therefore means adding an entry with exactly that name, or the page silently gets only `common`. An entry looks like this ([`resources/js/entries/articlesIndex.js`](../../resources/js/entries/articlesIndex.js)): ```js // Import styles import '../../scss/entries/articlesIndex.scss'; // Import widgets import ArticleWidget from '../widgets/ArticleWidget'; import PaginationWidget from '../widgets/PaginationWidget'; // Initialize widgets PaginationWidget.init(); ArticleWidget.init(); ``` SCSS first, then widgets, then `init()` calls. `./yii dev/create-entry [widgets…]` writes this file for you. ### Build configuration worth knowing | Setting | Effect | |---------|--------| | `disableSingleRuntimeChunk()` | every entry is standalone — no shared runtime file to load | | `enableVersioning( isProduction )` | production filenames get a content hash; dev filenames do not | | `autoProvidejQuery()` | `$` and `jQuery` are global without importing | | `configureCssLoader` url filter | URLs starting with `/images/` are **not** resolved by webpack — they stay absolute and are served from `web/images/` | | `enableSourceMaps( !isProduction )` | no source maps in production | | Terser + css-minimizer | only in production | `cleanupOutputBeforeBuild()` wipes `web/build/` on every build — which is why a dev build must never be committed. See [../COMMIT.md](../COMMIT.md). ## How assets reach the page `View` reads `web/build/entrypoints.json`: - **CSS is inlined.** `registerEncoreStyles()` `file_get_contents()`s each stylesheet and echoes it inside a `