Vicc

[[oktatas:web:webpack|< Webpack]] ====== Webpack ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2021, 2023 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== A Webpack ===== JavaScript alapú alkalmazások fejlesztésére használható eszköz. Ügyel arra, hogy egy függőség csak egyszer legyen betöltve. A weboldalakt kliensoldalon rendereli. * https://webpack.js.org/ (2021) Példa Githubon: * https://github.com/andteki/webpack_proba.git ===== Alapozás =====


mkdir projekt01
cd projekt01
npm init -y
npm install webpack webpack-cli --save-dev

A következő könyvtárszerkezetet készítjük el:


projekt01/
  |-dist/
  |  `-index.html
  |-node_modules/
  |-src/
  |  |-genJoke.js
  |  `-index.js
  |-package-lock.json
  `package.json

===== Koncepció ===== * Az index.html csak a dist/ könyvtárban létezik, és csak egyetlen fájlt hivatkozunk, a main.js-t. * A JavaScriptet az src/ könyvtárban szerkesztjük több fájlban is. * Az eredményt, viszont a dist/ könyvtárban kíséreljük figyelemmel. ===== Weblap =====





    
    
    Vicc


    Vicc a konzolon

===== JavaScript ===== Írjunk egy modult:


function genjoke() {
    return 'Ez most már jó lesz egy darabig'
}

export default genjoke

Az induló fájl neve index.js. Ez független a pakcage.json fájlban megadottól.


import genjoke from "./genJoke";

console.log(genjoke())

===== package.json =====


{
  "name": "ketto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.86.0",
    "webpack-cli": "^5.1.4"
  }
}

===== A main.js elkészítése ===== npm run build Nézzük meg milyen main.js-t generál a parancs. Most írjuk át, vagy hozzá:


import { v4 as uuidv4 } from 'uuid'
console.log(uuidv4())

Nézzük meg újból. ===== Beállítások ===== A beállításokat írjuk egy webpack.config.js fájlba.


module.exports = {
    mode: 'production',
    entry: './src/app.js'
}

A mode lehet * production * development Nézzük meg az dist/main.js fájl tartalmát mindkét esetben. ==== Belépésipont ==== Az entry segítségével beállítható a forráskönyvtár, illetve azon belül az induló állománynév. Például:


entry: './src/app.js'

==== Kimeneti fájl ==== Az **output** tulajdonsággal állítjuk, az értéke pedig egy objektum. Példában egy teljes konfigurációs fájl:


const path = require('path')

module.exports = {
    mode: 'production',
    entry: './src/app.js',
    output: { path: path.resolve(__dirname, 'public') }
}

Az exportálás a végén:


const path = require('path')

const config = {
    mode: 'production',
    entry: './src/app.js',
    output: { path: path.resolve(__dirname, 'public') }
}

module.exports = config

Kimeneti fájl és könyvtár:


const path = require('path')

const config = {
    mode: 'production',
    entry: './src/app.js',
    output: { 
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'    
    }
}

module.exports = config

==== Modulok ====


module: {
    rules: [
      {
        exclude: /(node_modules)/,
        test: /\.(js|jsx)$/i,
        loader: "babel-loader"
      }
    ]
  },

Teljes fájl:


const path = require('path')

const config = {
    mode: 'production',
    entry: './src/app.js',
    output: { path: path.resolve(__dirname, 'public') },
    module: {
        rules: [
          {
            exclude: /(node_modules)/,
            test: /\.(js|jsx)$/i,
            loader: "babel-loader"
          }
        ]
      }    
}

module.exports = config

A babel-loader használatához szükséges: npm install -D babel-loader @babel/core @babel/preset-env webpack ===== Stílusbetöltés ===== Szükséges csomagok telepítése: npm install --save-dev sass sass-loader style-loader css-loader A stílushoz SCSS-t használunk a következő fájlban: * src/styles/main.scss


const path = require('path')

const config = {
    mode: 'production',
    entry: './src/app.js',
    output: { 
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'    
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}

module.exports = config

Az SCSS fájl:



body {
    background-color:cadetblue;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

===== Plugin használata =====


plugins: [
    new HtmlWebpackPlugin({
        title: 'Vicc',
        filename: 'index.html'
    })
]

A teljes kód:


const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
    mode: 'production',
    entry: './src/app.js',
    output: { 
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'    
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Vicc',
            filename: 'index.html'
        })
    ]
}

module.exports = config

==== Template használata ====


const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
    mode: 'production',
    entry: './src/app.js',
    output: { 
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'    
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Ap',
            filename: 'index.html',
            template: 'src/template.html'
        })
    ]
}

module.exports = config





    
    
    <%= htmlWebpackPlugin.options.title %>


    Vicces lap

===== Fejlesztői szerver ===== Készítsünk egy **dev** nevű scriptet a package.json fájlban.


  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack serve"
  },

Indítsuk el a szervert. npm run dev Megkérdezi, hogy telepítsük-e a webpack-dev-server csomagot. Csak nyomjunk Entert.


npm run dev

> projekt01@1.0.0 dev
> webpack serve

[webpack-cli] For using 'serve' command you need to install: 'webpack-dev-server' package.
[webpack-cli] Would you like to install 'webpack-dev-server' package? (That will run 'npm install -D webpack-dev-server') (Y/n)

A webhelyet nézzük meg böngészőben: http://localhost:8080 Írjunk a szerveren beállításokat a webpack.config.js fájlban:


    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist')
        },
        port: 3000,
        open: true
    },


    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist')
        },
        port: 3000,
        open: true,
        compress: true,
        historyApiFallback: true
    },

===== Linkek ===== * https://dev.to/typescripttv/6-ways-to-configure-webpack-5a33 (2023) * https://www.youtube.com/watch?v=IZGNcSuwBZs (2023) * https://www.smashingmagazine.com/2021/06/getting-started-webpack/ (2023)