Tartalomjegyzék
Webpack
- Szerző: Sallai András
- Copyright © 2021, Sallai András
- Szerkesztve: 2025
- Licenc: 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:
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:
- index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webpack</title> </head> <body> <script src="main.js"></script> </body> </html>
Nyissuk meg a weblapot böngészőben. A böngészőben kapcsoljuk be a fejlesztői felületet.
Beállítások
A webpack.config.js fájl tartalmát automatikusan olvassa a webpack parancs. Állítsuk be a folyamatos figyelést.
- webpack.config.js
module.exports = { watch: true }
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:
- webpack.config.js
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.
Template fájl
Az src/index.html fájlt hozzuk létre template-nek.
- 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>
- webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require('path'); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", }) ] }
npm run dev