## **Webpack alapú UIkit Component Builder** ### **1. Fájlstruktúra** ``` uikit-webpack/ ├── app/ │ ├── index.js (Dinamukusan generált fájl a kiválasztott komponensekkel) ├── dist/ │ ├── bundle.js (Webpack által generált fájl) ├── index.html (Fő HTML fájl) ├── webpack.config.js (Webpack konfiguráció) ├── package.json (Projekt beállítások) ├── component-builder.html (UI a komponensválasztáshoz) ``` --- ### **2. Alap Webpack beállítások** #### **`webpack.config.js`** ```js const path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, mode: 'development' }; ``` --- ### **3. Dinamikus UIkit komponenst generáló felület** #### **`component-builder.html`** ```html UIkit Component Builder

Válassz UIkit komponenseket






``` --- ### **4. Használat** 1. Futtasd az alábbi parancsokat a projekt létrehozásához: ```sh mkdir uikit-webpack && cd uikit-webpack yarn init -y yarn add uikit yarn add --dev webpack ``` 2. Nyisd meg a `component-builder.html`-t a böngészőben. 3. Válaszd ki a kívánt UIkit komponenseket és generáld le az `index.js` fájlt. 4. Helyezd az `index.js` fájlt az `app/` mappába. 5. Futtasd Webpackot: ```sh npx webpack ``` 6. Nyisd meg az `index.html` fájlt a böngészőben. --- ### **5. Összegzés** ✅ Checkbox-okkal választhatod ki az UIkit komponenseket. ✅ Egyedi `index.js` fájl generálódik, amely csak a kiválasztott komponenseket importálja. ✅ Webpack csomagolja az UIkit-et és a kiválasztott komponenseket egy `bundle.js` fájlba. ✅ Az `index.html` fájl tartalmazza az UIkit CSS-t és a `dist/bundle.js` fájlt. Ezzel a módszerrel egy könnyen bővíthető és moduláris Webpack alapú UIkit komponenst építő rendszer jött létre. 🚀