Webpack: Úvod – zooom.cz

package.json

Konfigurační soubor package.json obsahuje nastavení projektu.

Příkazem npm init vytvoříme nový soubor package.json:

npm init -y

parametr -y říká, že příkaz proběhne bez dotazů na uživatele a budou použity výchozí hodnoty

Instalace nástroje webpack

npm install --save-dev webpack

parametr –save-dev říká, že balíček třetí strany bude přidán do sekce závislostí pro vývojové prostředí – sekce devDependencies v souboru package.json

Struktura nového projektu

webpack-demo
 |- package.json
 |- /dist
     |- index.html
 |- /src
     |- index.js

Zdrojový kód je oddělen od distribučního kódu.

Zdrojové soubory (složka src) obsahují náš kód aplikace. Zapisujeme do nich a měníme je dle potřeby.
Distribuční soubory kódu (složka dist) jsou výstupem nástroje Webpack. Ve výsledku jsou minimalizovány a optimalizovány pro načtení prohlížečem.

Instalace potřebných balíčků

V souboru src/index.js používáme proměnné balíčku lodash. Provedeme instalaci balíčku lodash:

npm install --save lodash

příkaz npm install nainstaluje do projektu nový balíček
parametr –save balíček uloží mezi požadované závislosti do souboru package.json

Soubor dist/index.html

<html>
<head>
  <title>Getting Started</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

Soubor src/index.js

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  // Lodash, now imported by this script
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

příkaz import říká, že náš soubor index.js vyžaduje přítomnost balíčku lodash.

Moduly

Při práci se závislostmi mezi balíčky používáme příkazy ECMAScriptu import a export. Prohlížeče tyto příkazy zatím nepodporují, nástroj Webpack však ano.
Webpack převádí kód na verzi javascriptu podporovanou prohlížeči.

Konfigurace Webpacku

 webpack-demo
 |- webpack.config.js

Soubor webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

V souboru konfigurace webpacku můžeme dále spravovat pravidla pro nahrávání balíčků, pluginy a další nastavení.

Vytvoření distribučního souboru

npx webpack --config webpack.config.js

voláme příkaz webpack s určením souboru s konfigurací

Pokud soubor s konfigurací pojmenujeme webpack.config.js, můžeme webpack spustit i bez uvedení konfiguračního souboru:

npx webpack

Soubor dist/bundle.js nyní obsahuje veškerý potřebný kód javascriptu včetně závislých balíčků.

Skripty NPM

Více na npm-scripts.

V souboru package.json můžeme mimo jiné specifikovat příkazy, které pak lze volat v konzoli za účelem usnadnění opakujících se činností.

Např.:

Do souboru package.json přidáme do sekce scripts nový příkaz:

{
  ...
  "scripts": {
    "build": "webpack --colors"
  },
  ...
}

Pokud nyní zavoláme příkaz:

npm run build

Ve skutečnosti bude zavolán příkaz:

npx webpack --colors

Zdroje:

Webpack.js