szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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 =====

<code>
mkdir projekt01
cd projekt01
npm init -y
npm install webpack webpack-cli --save-dev
</code>

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

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

===== 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 =====


<code html dist/index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vicc</title>
</head>
<body>
    <p>Vicc a konzolon</p>
    
    <script src="main.js"></script>
</body>
</html>
</code>

===== JavaScript =====

Írjunk egy modult:

<code javascript src/genjoke.js>
function genjoke() {
    return 'Ez most már jó lesz egy darabig'
}

export default genjoke
</code>

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

<code javascript src/index.js>
import genjoke from "./genJoke";

console.log(genjoke())
</code>

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

<code javascript 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"
  }
}
</code>

===== 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á:

<code>
import { v4 as uuidv4 } from 'uuid'
console.log(uuidv4())
</code>

Nézzük meg újból.
===== Beállítások =====

A beállításokat írjuk egy webpack.config.js fájlba.

<code javascript webpack.config.js>
module.exports = {
    mode: 'production',
    entry: './src/app.js'
}
</code>

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:

<code>
entry: './src/app.js'
</code>

==== 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:

<code javascript webpack.config.js>
const path = require('path')

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

</code>

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

<code javascript webpack.config.js>
const path = require('path')

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

module.exports = config
</code>

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

<code javascript webpack.config.js>
const path = require('path')

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

module.exports = config
</code>


==== Modulok ====

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

Teljes fájl:
<code javascript webpakc.config.js>
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
</code>

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


<code javascript webpack.config.js>
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
</code>

Az SCSS fájl:

<code css src/styles/main.scss>

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

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

<code javascript>
plugins: [
    new HtmlWebpackPlugin({
        title: 'Vicc',
        filename: 'index.html'
    })
]
</code>

A teljes kód:

<code javascript webpack.config.js>
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
</code>

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

<code javascript webpack.config.js>
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
</code>

<code html src/template.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <h1>Vicces lap</h1>
</body>
</html>
</code>

===== Fejlesztői szerver =====

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

<code javascript package.json>
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack serve"
  },
</code>

Indítsuk el a szervert.

  npm run dev


Megkérdezi, hogy telepítsük-e a webpack-dev-server csomagot. Csak nyomjunk Entert.

<code>
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) 
</code>

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:

<code javascript>
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist')
        },
        port: 3000,
        open: true
    },
</code>


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

===== 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)