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:nodejs|< Node.js]]

====== Webpack ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== A webpack =====

A webpack egy statikus modul előállító JavaScript alkalmazások számára.

Webhely:
  * https://webpack.js.org/

===== Indulás =====

<code>
mkdir projekt01
cd projekt01
npm init -y
</code>

  npm install webpack webpack-cli --save-dev


Javítsuk a scripts részt a package.json fájlban a következők szerint:
<code>
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},
</code>


Kezdés előtt, hozzunk létre egy src könyvtárat, benne egy index.js
fájlt. 

  mkdir src
  echo "console.log('Helló Világ');" > src/index.js

Indíthatjuk a fejlesztői módot:
  npm run dev


Létrejön egy dist könyvtár benne main.js állománnyal.

A megjelenítéshez készítsünk egy HTML állományt
index.html néven a dist könyvtárban, a következő
tartalommal:

<code html index.html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>
</code>


Nyissuk meg a weblapot böngészőben. A böngészőben kapcsoljuk be
a fejlesztői felületet.

<note>
Ebben a formában a weblapot a dist könyvtárban fejlesztjük vagy a webpack eszközzel generáltatjuk template fájlból.
</note>

===== Beállítások =====

A webpack.config.js fájl tartalmát automatikusan olvassa a webpack parancs.
Állítsuk be a folyamatos figyelést.

<code javascript webpack.config.js>
module.exports = {
  watch: true
}
</code>


===== HTML bővítmény =====

  npm install html-webpack-plugin --save-dev

Készítsünk egy webpack.config.js fájlt, ha az nem létezik még. Tartalma:

<code javascript webpack.config.js>
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack kimenet",
    }),
  ],
};
</code>


Most futtassuk újra a dev parancsot:
  npm run dev

Majd nézzük meg újra az index.html tartalmát. Vegyük észre a
frissült tartalmat.

<code html index.html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack kimenet</title>
    <meta name="viewport" 
    content="width=device-width, initial-scale=1">
    <script defer src="main.js"></script>
  </head>
  <body>
  </body>
</html>
</code>

==== Template fájl ====

Az src/index.html fájlt hozzuk létre template-nek.

<code html src/index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <h1>Akármi</h1>
    <p>
      Egy
    </p>
  </div>
</body>
</html>
</code>


<code javascript webpack.config.js>
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    })
  ]
}
</code>

  npm run dev



===== Források =====

  * https://webpack.js.org/guides/getting-started/ (2021)
  * https://www.sitepoint.com/webpack-beginner-guide/ (2021)
  * https://www.codeinwp.com/blog/webpack-tutorial-for-beginners/ (2021)
  * https://www.valentinog.com/blog/webpack/ (2021)