Zabalení JavaScriptu

Z minulé části máme nainstalovaný Webpack. V této části se pustíme do vytváření prvního konfiguračního souboru a zabalíme si zatím jen náš JavaScript kód.

Pokud z nějakého důvodu nemáte kód z minulé části, tak si můžete stáhnout startovní kód pro tuto část. Po jeho stažení si nainstalujte balíčky, které jsou specifikované v souboru package.json. To provedete příkazem "npm install". A pokud kód z minulé části máte, tak napište "npm install" také, protože je v souboru package.json kromě balíčků pro Webpack specifikovaný také balíček pro LESS preprocesor. V příštích částech až budeme zpracovávat styly jej budeme také potřebovat. Já jsem jej v projektu zatím používal jen k vytvoření CSS souboru ručně spuštěním skriptu "compile:less", který jsem si v package.json souboru napsal.

Vytvoření konfiguračního souboru

Pro konfiguraci Webpacku potřebujeme konfigurační soubor, který Webpacku při jeho spuštění předáme. Webpack sice funguje i bez konfiguračního souboru, ale bude mít nastavená defaultní nastavení, která se pro naprostou většinu projektů nehodí. Konfigurační soubor je JavaScript soubor, ve kterém exportujeme objekt, pomocí kterého Webpack konfigurujeme. Může mít jakýkoliv název, ale doporučoval bych jej pojmenovat tak, aby bylo jasné že se jedná o Webpack konfiguraci. Pro naši aplikaci si v kořenové složce vytvoříme soubor "webpack.config.js".

Soubor si můžeme otevřít a začít do něj psát konfiguraci Webpacku. Každý konfigurační soubor exportuje objekt, ve kterém Webpack konfigurujeme.

module.exports = {
    // v tomto objektu Webpack nastavujeme
}

Webpack začíná náš kód zpracovávat z nějakého vstupního souboru, který mu nastavíme. Pro nás je to soubor index.js ve složce assets/js. Vstupní soubor se nastavuje prostřednictvím vlastnosti "entry". Vstupních souborů můžeme nastavit i více, ale mi pro naši aplikaci máme jen jeden.

module.exports = {
    entry: "./assets/js/index.js"
}

Až Webpack spustíme, tak začne zpracovávat soubor index.js. Podívá se jestli se v něm neimportují nějaké moduly, které také rekurzivně zpracuje. Vytvoří si graf závislostí a sloučí JavaScript kód do jednoho souboru. A pokud Webpack spouštíme v produkčním módu, tak také provede tree shaking, což je technika pro odstranění kódu, který jsme nepoužili.

Kromě vstupního souboru musíme také nastavit, kam se má umístit výsledný kód. To provedeme pomocí vlastnosti output, které jako hodnotu nastavíme objekt, kde specifikujeme absolutní cestu ke složce. Také můžeme nastavit pár dalších nastavení, jako je jméno výsledného souboru a tak dále. Mi si ještě zapneme nastavení clean, které zajistí, že se složka před umístěním výsledného souboru promaže. Cesta ke složce musí být absolutní, proto musíme pro její získání použít metodu resolve vestavěného NodeJS modulu jménem path. Jako parametr jí předáme cestu ke složce ve které se nachází konfigurační soubor (__dirname) a složku "dist". Složka "dist" ani nemusí existovat, automaticky se vytvoří.

const path = require("path");

module.exports = {
    entry: "./assets/js/index.js",
    output: {
        path: path.resolve(__dirname, "dist"), // absolutní cesta ke složce dist
        clean: true // složka se před umístěním výsledného souboru promaže
    }
}

Spuštění Webpacku

Teď už bychom měli mít všechno nastavené tak, aby se náš JavaScript kód zpracoval a sjednotil do jednoho souboru. Můžeme tedy Webpack spustit. Na to si ale budeme muset v souboru package.json napsat skript. Takže si jej otevřeme a v části scripts napíšeme příkaz, pomocí kterého Webpack spustíme. Ten vidíte v následující ukázce.

{
    "name": "webpack-app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "compile:less": "lessc ./less/main.less ./assets/css/style.css",
        "build": "webpack --config webpack.config.js --mode production"
    },
    "author": "Jiří Satora",
    "license": "ISC",
    "devDependencies": {
        "less": "^4.1.3",
        "webpack": "^5.73.0",
        "webpack-cli": "^4.10.0"
    }
}

Příkaz, který v předchozí ukázce vidíte, Webpack spustí s konfiguračním souborem jménem "webpack.config.js" v módu pro produkci. Později si vytvoříme jednu konfiguraci pro produkci a druhou pro vývoj. Prozatím nám ale bude stačit, že když tento příkaz spustíme, tak se nám JavaScript zpracuje pro produkci. Náš skript zapsaný v package.json můžeme spustit příkazem "npm run build". Pokud jste si skript uložili pod jiným názvem, tak samozřejmě použijete namísto názvu "build" svůj název.

npm run build

Poté co Webpack provede svoji práci, by se nám v kořenové složce našeho projektu měla objevit složka dist a v ní výsledný JavaScript soubor jménem main.js. Tento soubor obsahuje náš sloučený JavaScript kód, který je navíc minifikovaný, aby zabral méně místa.

Později si Webpack nastavíme tak, aby nám do dist složky kopíroval i jiné soubory. Jen tak bychom si teď ale mohli v našem HTML souboru změnit script tag, aby odkazoval na náš zabalený JavaScript kód v dist složce. Aplikace by měla fungovat úplně stejně jako předtím a navíc ji teď ani nemusíme spouštět na webovém serveru, protože nepoužíváme JS moduly.

<script src="./dist/main.js"></script>

Pokud byste výslednému JavaScript souboru chtěli nastavit jiné jméno, tak můžete. Dělá se to pomocí vlastnosti filename v objektu, který předáváme vlastnosti output.

const path = require("path");

module.exports = {
    entry: "./assets/js/index.js",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "dist"),
        clean: true
    }
}

To by bylo pro tuto část vše. Začali jsme s konfigurací Webpacku a sloučili a zminifikovali si naše JavaScript soubory. V příští části si Webpack nakonfigurujeme tak, aby zpracovával i naše CSS a LESS soubory.