Webpack - krok za krokem

WEBPACK! Jednoduše je to modulární balíčkovač, což znamená, že při vývoji aplikace můžete vytvářet moduly (nejen JS, ale i HTML & CSS!). Webpack přebírá zodpovědnost za slučování vaší aplikace a poskytuje vám přizpůsobenou nejjednodušší verzi aplikace, která obsahuje pouze HTML, CSS a Javascript.

Tato příručka vám umožní snadno konfigurovat webový balíček za pouhých 5 minut pro jakýkoli projekt.

1. Nastavení projektu

Nejdůležitějším klíčem aplikace je její architektura!

1.1. Vytvoření složky projektu a přistání na kořen projektu (přes terminál)

> mkdir project_name && cd Název_projektu

1.2. Inicializujte projekt pomocí npm

> npm init

1.3. Vytvořit adresáře projektů

> mkdir src dist src/assets src/assets/media src/assets/js src/assets/scss

1.4. Naplnění adresářů projektu

> touch webpack.config.js README.md .babelrc src/index.html src/app.js src/assets/scss/app.scss

1.5. Instalace webpacku

> npm i -D webpack

npm i -D webpack je zkrácený příkaz npm install — save-dev webpack Podrobně o instalaci webpacku pomocí NPM naleznete v navazujícím článku.

Hierarchie projektu

Konfigurace package.json

Pokud je webový balíček ve vašem počítači nainstalován globálně, jednoduše zapíšete tyto příkazy do package.json skriptů:

"scripts": {
  "build": "webpack",
  "build:prod": "webpack -p",
  "watch": "webpack --watch"
}

Myslím, že lepší přístup je nainstalovat aktualizovaný webový balíček místně pro každý projekt, který vám dá úplnou svobodu v rozvojovém procesu. 
Pokud postupujete podle kroků a lokálně nainstalujete webový balíček, změna package.json by byla:

"scripts": {
  "build": "./node_modules/.bin/webpack",
  "build:prod": "./node_modules/.bin/webpack -p",
  "watch": "./node_modules/.bin/webpack --watch"
}

Spuštěný binární soubor Webpack zůstane v tomto adresáři

3. Základ pro konfigurační soubor webpacku

Co udělat jako první. 
Webpack prostě potřebuje mít čtyři základní věci pro správné nastavení. 
 1. Entry - Vstup 
 2. Output - Výstup
 3. Loaders 
 4. Plugins

V této sekci definujeme vstup a výstup pro webpack a podíváme se na první výstupní formát.

3.1. Export konfiguračních objektů

Vzhledem k tomu, že používáme node.js a webový balíček používá modulární vzory, musíme nejprve exportovat konfigurační objekty z našeho webpack.config.js

module.exports = {
  // configurations here
}

nebo

const config = {
  // configurations here
};
module.exports = config;

3.2. Definice entry

Jediný entry bod:

Aplikace se spouští z tohoto bodu, pokud je vaší aplikací SPA (Single Page Application). Definujeme zde cestu vzhledem k našemu kořenu projektu

const config = {
  entry: './src/app.js',
};

Více entry bodů:

Pokud má vaše aplikace více vstupních bodů (například vícestránková aplikace), musíte definovat vstupní body uvnitř entry objektu se stejnými názvy. Označí se více vstupních bodů a budou volány chunks vlastnosti (individuální vstupní bod) tohoto vstupního objektu entryChunkName. Takže si to vytvořme:

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
}

3.3. Definice output

Webpack potřebuje vědět, kam psát kompilované soubory na disk. Proto se musí definovat výstupní bod pro webový balíček.

Výstupní bod definujeme jako object. Tento objekt musí obsahovat alespoň dvě věci: 
 1. filename (použít název výstupního souboru) 
 2. path (absolutní cesta k preferovanému výstupnímu adresáři)

Můžeme definovat path v output ručně. Ale to nebude rozumná volba, jelikož název a umístění našeho kořenového projektu se může později změnit. Kromě toho vy nebo váš spolupracovník můžete klonovat své projekty na různých počítačích, v takovém případě by tam vlastní uživatelská absolutní cesta nepracovala. 
Abychom to vyřešili, používáme path modul node.js, který poskytuje pohodlnější způsob absolutní cesty pro kořen projektu.

Chcete-li použít path modul node.js, je třeba jej importovat do našeho souboru s konfigurací a poté jej použít v našem výstupním objektu

const config = {
  output: {
    filename: 'bundle.js',
    // Output path using nodeJs path module
    path: path.resolve(__dirname, 'dist')
  }
};

Lze použít path.join nebo path.resolve, oba fungují stejně. Detailní popis obou objektů:

path.resolve resource: zde
path.join resource: zde

Při vytváření více svazků pro více vstupních bodů byste měli použít jednu z následujících substitucí, aby každý svazek poskytl jedinečný název

Použití názvu položky:

filename: "[name].bundle.js"

Použití hashů na základě obsahu každého bloku:

filename: "[chunkhash].bundle.js"

Další možnosti: https://webpack.js.org/configuration/output/#output-filename

Kromě toho můžete chtít dát relativní cestu k výstupnímu souboru pomocí output.filename

3.4. Definujte Context

Context je základní adresář, absolutní cesta, pro vyřešení vstupních bodů a načtení z konfigurace. Ve výchozím nastavení se používá aktuální adresář, ale doporučuje se předat hodnotu ve vaší konfiguraci. Tato konfigurace je nezávislá na CWD (aktuální pracovní adresář).

const config = {
  context: path.resolve(__dirname, "src")
};

Finální podoba konfigurace:

const path = require('path');

const config = {
  context: path.resolve(__dirname, 'src'),  
  entry: {
    // removing 'src' directory from entry point, since 'context' is taking care of that
    app: './app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './assets/js/[name].bundle.js'
  }
}

module.exports = config;

Pro otestování balíčku zadejte do termínálu následující příkaz:

> npm run build

Pro vygenerování produkčního balíčku zadejte:

> npm run build:prod

Pro zapnutí developerského módu se použije direktiva watch:

> npm run watch

Nyní přidáme několik loaderů a pluginů, abychom vytvořili náš skutečný objekt konfigurace po dokončení dalších dvou nastavení. Budeme používat nějakou automatizaci, kterou poskytuje webový balíček.

4. NASTAVENÍ WEBPACK-DEV-SERVER 

Webpack nám pro vývoj poskytuje vestavěný server, takže uvidíme, co se stane, zatímco naše aplikace je připravena pro nasazení do skutečného serveru. Ale musíme jej nejprve nainstalovat.

4.1. Instalace webpack-dev-server

Nainstalujte webpack-dev-server přes terminal

> npm i -D webpack-dev-server

4.2. Přidání příkazu do package.json

Přidat tento příkaz scripts do package.json

"dev": "./node_modules/.bin/webpack-dev-server"

4.3. Konfigurace webpack-dev-server

Existuje spousta možností konfigurace webpack-dev-server. Budeme hledat některé důležité.

Ve vašem config objektu vytvoříme novou vlastnost s názvem devServer (syntaxe je důležitá)

devServer: {}

Tento objekt je připraven k získání některých konfiguračních možností, například:

#1 devServer.contentBase

Řekne serveru, odkud se bude obsah zobrazovat. To je nutné pouze v případě, že chcete zobrazovat statické soubory.

Pro architekturu našich projektů chceme, aby všechny naše statické obrázky byly uloženy v dist/assets/media adresáři

contentBase: path.resolve(__dirname, "dist/assets/media")

#2 devServer.stats

Tato volba umožňuje přesně řídit, jaké informace svazku se zobrazí. Chcete-li zobrazit pouze chyby v balíčku:

stats: 'errors-only'

pro další možnosti stats navštivte: https://webpack.js.org/configuration/stats

#3 devServer.open

Pokud chcete, aby aplikace otevřela poprvé v našem prohlížeči a poté ji znovu aktualizovala, zadejte kód

open: true

#4 devServer.port

Uveďte, které číslo portu chcete nainstalovat do vašeho webpack-dev serveru

port: 12000

#5 devServer.compress

Zapnutí gzip komprese

compress: true

Finální konfigurace dev serveru:

devServer: {
  contentBase: path.resolve(__dirname, "./dist/assets/media"),
  compress: true,
  port: 12000,
  stats: 'errors-only',
  open: true
}

5. Devtool konfigurace

Tato volba určuje, zda a jak jsou generovány zdrojové mapy. Díky této funkci přesně víme, kde hledat, abychom opravili / ladili problémy v naší aplikaci. Velmi, užitečné pro vývojové účely, ale neměly by být použity v produkci.

devtool: 'inline-source-map'

Existuje mnohem více možností jak nakonfigurovat devtool zde

Nastavili jsme většinu věcí, které jsou pro tuto chvíli potřebné ke konfiguraci webpacku. Zde je aktualizovaný kód toho, co jsme dosud udělali.

const path = require('path');

const config = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    // removing 'src' directory from entry point, since 'context' is taking care of that
    app: './app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './assets/js/[name].bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, "./dist/assets/media"),
    compress: true,
    port: 12000,
    stats: 'errors-only'
    open: true
  },
  devtool: 'inline-source-map'
}

module.exports = config;

Soubor package.json vypadá následovně

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "Webpack 3 quickstarter",
  "main": "app.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack",
    "build:prod": "./node_modules/.bin/webpack -p",
    "watch": "./node_modules/.bin/webpack --watch",
    "dev": "./node_modules/.bin/webpack-dev-server"
  },
  "author": "Nirjhor",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

Definice verze webpack-dev-serveru a webpacku se může lišit podle aktuální produkce.