Tartalomjegyzék

Webpack

Webpack

Szerző: Sallai András
Copyright © Sallai András, 2021, 2023
Licenc: 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

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>

JavaScript

Írjunk egy modult:

src/genjoke.js

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.

src/index.js

import genjoke from "./genJoke";
 
console.log(genjoke())

package.json

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.

webpack.config.js

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:

webpack.config.js

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:

webpack.config.js

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:

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

Modulok

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

Teljes fájl:

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

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

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

Az SCSS fájl:

src/styles/main.scss

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:

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

Template használata

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

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>

Fejlesztői szerver

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

package.json

  "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
    },

szit

Felhasználói eszközök

Eszközök a webhelyen

Tartalomjegyzék

Webpack

A Webpack

Alapozás

Koncepció

Weblap

JavaScript

package.json

A main.js elkészítése

Beállítások

Belépésipont

Kimeneti fájl

Modulok

Stílusbetöltés

Plugin használata

Template használata

Fejlesztői szerver

Linkek

Eszközök az oldalon