Webpack

Közzétéve Szerző:

Figyelem: ha bármit parancssorba másolunk copy-paste megoldással, akkor a parancssorban vagy a fejlesztői felület fájljában a ” és a – és a −− karatkereket írjuk újra át kézzel a saját billentyűzetről, különben valamilyen karakterkódolási probléma miatt hibára futunk!

Modul: ha egy utasítássorozat többször is előfordul egy programban, akkor azt a kódrészletet egy külön fájlba szervezzük ki, amely minden más fájl számára hozzáférhető lesz a megfelelő kulcsszavak használatával. A modul tehát egy külön fájlba elhelyezett kódrészlet. Ezeket a modulokat lehet exportálni és importálni. Azaz egy modul több másik modult is importálhat.

Webpack: a webpack egy module bundler (bundle:csomag), amely a modulokból (itt modulnak számítanak a képek, CSS fájlok, JavaSript fájlok) és a feltelepített npm csomagokból egy bundle-t (csomagot) hoz létre. A webpack figyelembe veszi, hogy mi mit tölt be, így elkerüli a duplikációt, hiszen figyeli, hogy egy csomagot betöltöttünk-e már. A nem használt CSS és JavaScript kódokat is képes kezelni, így rövidebb kódot generál.

A használatához telepítve kell hogy legyen a node és az npm. Ellenőrzése parancssorból: node –version; npm –version;

mappa létrehozása; package.json létrehozása: npm init; ha nincs js fájl, akkor az index.js-t tekinti entry point-nak (package.json-ben „main” key); installálni kell: (itt bugos a WordPress: a parancssor nem tudja értelmezni az innen kimásolt ‐‐ jelet, ezért azt írjuk át a billenytűzetről a parancssorban: ‐‐save-dev) npm install ‐‐save-dev webpack webpack-cli webpack-dev-server copy-webpack-plugin css-loader style-loader; (webpack-cli: command line interface a webpack-hoz; webpack-dev-server: ez a webszerver szolgálja ki a fejlesztés idejére az alkalmazást;copy-webpack-plugin: a fájlokat másolja build időben; css-loader, style-loader: a css fájlok bekötéséhez szükséges); ha szeretném. akkor @-cal a verziószámot is megadhatom a függőségnél, pl. style-loader@1.2.1; a ‐‐save-dev kapcsoló: a devDependencies közé veszi fel a függőségeket; ennek annyiban nincs jelentősége, hogy a webpack csak azokat a kódokat tartja meg, amiket az applikáció fel is használ, de fejlesztői szempontból jó, ha látom, hogy mik azok a függőségek, amelyek csak a fejlesztéshez kellenek; az installálás során létrejön a node_modules mappa, ez tartalmazza a függőségeket;

npm install --save-dev webpack webpack-cli webpack-dev-server copy-webpack-plugin css-loader style-loader;

UPDATE (2021 09 01) valamelyik függőség új verziójával valami lehet, így az npm start futtatása hibára fog futni. Használhatjuk a fenti npm telepítések helyett a következő – régebbi verziókat tartalmazó – package.json-t, s így telepítjük a függőségeket az npm install paranccsal (viszont itt egy halom WARN deprecated figyelmeztetést kapunk):

{
  "name": "idojaras2",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "webpack serve",
    "build": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "loader": "^2.1.1",
    "sass": "^1.35.2",
    "sass-loader": "^12.1.0",
    "style": "0.0.3",
    "style-loader": "^3.0.0",
    "ttf-loader": "^1.0.2",
    "webpack": "^5.44.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "na92-card": "^1.0.0"
  }
}

Az error jelzése ez lesz: options has an unknown property ‘contentBase’; Megoldása: contentBase was renamed to static, azaz a contentBase property-t át kell nevezni static-ra a webpack.config.js fájlban – erről a fájlról mindjárt szó lesz;

ha elküldjük zippelve az alkalmazást, akkor a node_modules mappát hagyjuk ki, a fogadó fél az npm install paranccsal tudja létrehozni a package.json file alapján;

fel kell venni a projekt gyökérmappájában egy webpack.config.js fájlt, ez fogja a webpack-et konfigurálni; (kézzel kell felvenni és kitölteni);

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const DIST_DIR = path.resolve(__dirname, 'dist');

module.exports = {
    entry: './app.js',
    output: {
        path: DIST_DIR,
        filename: 'bundle.js'
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {from: './index.html', to: DIST_DIR}
            ]
        })
    ],
    module: {
        rules: [
          {
            test: /\.css$/i,
            use: [
              "style-loader",
              "css-loader"
            ]
          },
        ]
    },
    devServer: {
        contentBase: DIST_DIR
    },
}

require: függvényhívás, lényegében import; a JS világban többféle import eljárás terjedt el, ezek közül egy a require; path.resolve: az aktuális mappához hozzáfűzi egy dist nevű mappát; DIST_DIR: ennek a dist mappának az elérési útvonala; module.export: ezt az objectet fogja a js fájl kiexportálni, ez lesz a webpack konfigurációja – ezt az objectet fogja a webpack feldolgozni; entry: az alkalmazás belépési pontja, innen indul el az importok sorozata, innen indulva építi ki a függőségek gráfját, itt dől el, hogy mik lesznek azok a függőségek, amelyek végül belefordulnak az itt meghatározott output-ba; output: a build folyamat kimenete, path: ebbe a mappába teszi a kimeneti fájlt; filename: ez lesz a kimeneti fálj, tetszőlegesen elnevezhető, értelemszerűen a dist mappában lesz; szokásos neve bundle.js plugin: a webpacken belül mindent pluginokkal oldunk meg; egy tömböt vár; több plugint is fel tudnánk sorolni; CopyWebpackPlugin: bizonyos fájlokat átmásol a dist mappába; ez azért van, mert az index.html fájlt sehol sem hivatkozzuk be az app.js fájlba, sehol máshol sem, egyszerűen csak azt szeretnénk, hogy ott legyen az alkalmazás gyökerében; module: a modulok, itt most a css-eket tölti be; test: milyen fájlnevekre egyezen a dolog, ezeket a nevű fájlokat akarjuk betölteni;devServer: futtassunk egy devszervert a lebuildelt alkalmazásból

A package.json „scripts” objectjébe két szkriptet kell felvenni: „start”: „webpack serve”, – ez egy webszervert hoz létre és futtatja az alkalmazást; ha közben átírjuk a kódot, akkor automatikusan újratölti; „build”: „webpack –config webpack.config.js”, – ez buildeli a webpack-et a webpack.config.js-nek megfelelően.

"scripts": {
    "start": "webpack serve",
    "build": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

futtatásuk: mivel a start beépített npm-es életciklus: npm start vagy npm run-script start; egyéb script parancsok mindig npm run-script előtaggal, azaz build futtatása: npm run-script build; ekkor létre jön a dist mappában a bundle.js; npm start: elindul a szerver; kiírja a terminál: Project is running at http://localhost:8080/; az index.html-be be kell kötni a bundle.js fájlt:<script src=”bundle.js></script>; nem a relatív elérési utat írjuk be, csak a fájl nevet;

A böngészőben a http://localhost:8080/ oldalon egy figyelmeztetést kaphatunk, ezt le kell ikszelni.

Az app.js-be a css közvetlenül beimportálható: import ‘./styles.css’; de beköthetem az index.html-be is: <link rel=”stylesheet” href=”./styles.css”>; ekkor viszont a webpack.config.js fájlban a CopyWebpackPlugin patterns key-hez tartozó tömbben létre kell hozni a {from: ‘./styles.css’, to: DIST_DIR} objectet, hogy a styles.css fájl bemásolódjon a dist-be; ha pl. képet akarunk berakni az index.html-be, akkor az img mappát ugyanúgy be kell copyzni a dist-be: {from: ‘./img’, to: DIST_DIR};

fontok betöltése; Google fonts-ból index.html head-be:  <link href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap” rel=”stylesheet”>

Sass: Syntactically Awesome Style Sheets; fájlkiterjesztés: scss; styles.scss; bővebben: itt;

változók deklarálása:pl. $base-color: #c6538c;

nesting:

.form-container { 
        form{display:flex;align-items:center}
    };

Parent Selector:

button {background:none;
        background-color:$secondary-color;
        color:#FFFFFF;

            &:hover{
                color:white;
                background-color:#254014;
            }

            &:focus{
                background-color: #3DFF4F;
                color: $font-color;
        }
    }

sass, sass-loader installálása: (itt bugos a WordPress: a parancssor nem tudja értelmezni az innen kimásolt ‐‐ jelet, ezért azt írjuk át a billenytűzetről a parancssorban: ‐‐save-dev) npm install ‐‐save-dev sass sass-loader; a devDependencies-be kerül, mert csak fejlesztési időben van rá szükség, a böngészők nem tudnak mit kezdeni a sass fájlokkal; sass: átfordítja a sass fájlokat css fájlokba; sass-loader betölti a sass fájlokat; a build folyamat css-t épít be a bundle-ba, így futásidőben már nincs szükség a sass-ra; test: /.s[ac]ss$/i – ez a sass és a scss fájlokra fog matchcselni; de írhatnánk ezt is helyette: test: /.scss$/i, ekkor csak az scss fájlokra matccsel; ha a styles.css fájlt átnevezzük styles.scss-re, elvileg maradhat benne az eredeti css nyelvű tartalom, a build folyamat azt is érteni fogja;

sass bekötése: webpack.config.js fájlban a module object rules tömbjébe elhelyezni; továbbá app.js-ben: import ‘./styles.scss’

 {
            //test: /\.css$/i,
            test: /\.s[ac]ss$/i,
            use: [
              "style-loader",
              "css-loader",
              "sass-loader"
            ]
          },

documentáció: https://webpack.js.org/loaders/sass-loader/

.gitignore fájl: mit ne töltsön fel a gitre:

verziószám: main.minor.patch; package.json: 1;Patch releases: 1.0 or 1.0.x or ~1.0.4; Minor releases: 1 or 1.x or ^1.0.4; Major releases: * or x; függőségek telepítése package.json megkötései szerint: npm install; a package-lock.json a használt verzió pontos verziószámát tartalmazza, ha ezen verziószámok szerint akarjuk telepíteni a függőségeket (hogy ne vegye figyelembe az esetleges függőségeket), akkor: npm ci

bootstrap elhelyezése: letöltés a mode_nodulesbe: npm install bootstrap; bekötés: a style.scss-be @import: ‘~bootstrap’; a tilde a node_modulesre mutat, ott fogja keresni a könyvtárat;