[[oktatas:web:nodejs|< Node.js]]
====== Webpack ======
* **Szerző:** Sallai András
* Copyright (c) 2021, Sallai András
* 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 =====
mkdir projekt01
cd projekt01
npm init -y
npm install webpack webpack-cli --save-dev
Javítsuk a scripts részt a package.json fájlban a következők szerint:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
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:
Webpack
Nyissuk meg a weblapot böngészőben. A böngészőben kapcsoljuk be
a fejlesztői felületet.
Ebben a formában a weblapot a dist könyvtárban fejlesztjük vagy a webpack eszközzel generáltatjuk template fájlból.
===== Html bővítmény =====
npm install html-webpack-plugin --save-dev
Készítsünk egy webpack.config.js fájlt, tartalma:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: "Webpack kimenet",
}),
],
};
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.
Webpack kimenet
===== 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)