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