Naučte se Webpack za 15 minut

Nástroje pro tvorbu se staly nedílnou součástí vývoje webu, a to především kvůli stále se zvyšující složitosti JavaScriptových aplikací. Bundlery nám umožňují zabalit, zkompilovat a uspořádat mnoho aktiv a knihoven potřebných pro moderní webový projekt.

V tomto tutoriálu se podíváme na webpack, výkonný open-source bundler a preprocesor, který zvládne obrovské množství různých úkolů. Ukážeme vám, jak psát moduly, svazovat kód a používat některé pluginy pro načítání. Výukový program je navržen pro úplné začátečníky s webpackem, ale doporučuje se mít určité znalosti JavaScriptu.

Proč webpack?

Stejně jako jakýkoli jiný aspekt vývoje webu neexistuje žádný standard, který nástroj pro tvorbu použít. Právě teď si vývojáři musí vybrat mezi webpackem, Gulpem, Browserify, NPM skripty, Gruntem a dalšími 10. Existuje mnoho hloubkových srovnání, ale všechny tyto nástroje jsou velmi podobné, takže většinou záleží na osobních preferencích a na tom, na jakém projektu pracujete.

Zde jsou některé výhody a nevýhody, které vám pomohou rozhodnout, zda je webpack tím nástrojem pro vás:

Výhody:

• Skvělé pro práci s jednostránkovými aplikacemi
• Přijímá obě require() a import syntaxe modulů
• Umožňuje velmi pokročilé dělení kódu
• Hot Reload pro rychlejší vývoj s React, Vue.js a podobnými frameworky
• Мnejoblíbenější nástroj pro vytváření podle průzkumu JavaScript z roku 2016

Nevýhody:

• Není vhodné pro začátečníky ve vývoji webu
• Práce se soubory CSS, obrázky a dalšími zdroji, které nejsou JS, je zpočátku matoucí
• Dokumentace by mohla být lepší
• Hodně se mění, dokonce i většina výukových programů pro rok 2016 je již zastaralá

1. Instalace

Nejjednodušší způsob instalace webpacku je pomocí správce balíčků. Půjdeme s npm, ale klidně použijte přízi nebo jinou hip alternativu. V obou případech musíte mít na svém počítači soubor Node.js a soubor package.json připraveno jít.

Je lepší jej nainstalovat lokálně (bez -g štítek). Tím zajistíte, že všichni pracující na vašem projektu budou mít stejnou verzi webpacku.

npm install webpack --save-dev

Jakmile jej nainstalujeme, je nejlepší spustit webpack prostřednictvím skriptu Node.js. Přidejte tyto řádky do souboru package.json:

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

Nyní voláním npm run build z terminálu můžeme vytvořit webpack, který spojí naše soubory (-p volba znamená produkci a minimalizuje přibalený kód). Spuštěn npm run watch spustí proces, který automaticky spojí naše soubory, když se kterýkoli z nich změní.

Poslední částí nastavení je sdělit webpacku, které soubory se mají sbalit. Doporučený způsob, jak toho dosáhnout, je vytvoření konfiguračního souboru.

2. Webpack Config File

Zde se podíváme na konfigurační soubor v jeho nejzákladnější podobě, ale nenechte se zmást – konfigurační soubor webpacku je poměrně výkonný, hodně se liší projekt od projektu a v některých případech může být velmi složitý.

Do kořenového adresáře vašeho projektu přidejte soubor s názvem webpack.config.js .

webpack.config.js

var path = require('path');

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

Záznam volba říká webpacku, který je naším hlavním JavaScriptovým souborem. Existuje mnoho různých strategií pro konfiguraci vstupních bodů, ale ve většině případů stačí jeden záznam.

Ve výstupu uvedeme název a cestu našeho svazku. Po spuštění webpacku budeme mít veškerý JavaScript v souboru s názvem bundle.js . Toto je jediný soubor skriptu, který propojíme v našem HTML:

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

Toto nastavení by nám mělo stačit, abychom mohli začít. Později k tomu přidáme nějaké další věci, ale nejprve se podívejme, jak moduly fungují.

3. Moduly Webpack

Webpack poskytuje několik způsobů, jak pracovat s moduly, a většinou si můžete vybrat kterýkoli z nich. Pro tento tutoriál použijeme ES6 import syntaxe.

Chceme přidat modul, který pozdraví naše uživatele. Vytvoříme soubor s názvem greeter.js a udělejte z něj export jednoduchou funkci:

greeter.js

function greet() {
    console.log('Have a great day!');
};

export default greet;

Abychom mohli tento modul používat, musíme jej importovat a zavolat v našem vstupním bodě , což, když se podíváte zpět na konfigurační soubor, je index.js.

index.js

import greet from './greeter.js';

console.log("I'm the entry point");
greet();

Nyní, když spustíme bundler s npm run build a otevřete náš HTML v prohlížeči, uvidíme toto:

Náš vstupní bod a náš uvítací modul byly zkompilovány do jednoho souboru s názvem bundle.js a provedl jej prohlížeč. Zde je jednoduchý vývojový diagram toho, co se zatím děje:

4. Vyžadování knihoven

Chceme, aby naše aplikace určila, který den v týdnu je, když uživatele zdraví. K tomu použijeme moment.js tak, že jej přímo importujeme do našeho modulu pozdravu.

Nejprve musíme nainstalovat knihovnu přes npm:

npm install moment --save

Pak v našem uvítacím modulu jednoduše importujeme knihovnu přesně stejným způsobem, jakým jsme importovali místní moduly v předchozím bodě:

greeter.js

import moment from 'moment';

function greet() {
    var day = moment().format('dddd');
    console.log('Have a great ' + day + '!');
};

export default greet;

Poté, co se znovu seskupíme, abychom použili změny, v konzole prohlížeče se zobrazí následující zprávy:

Náš vývojový diagram nyní vypadá takto:

5. Nakladače

Zavaděče jsou způsob, jakým webpack provádí úlohy během sdružování a nějakým způsobem před nebo po zpracování souborů. Mohou například kompilovat TypeScript, načítat komponenty Vue.js, vykreslovat šablony a mnoho dalšího. Většina zavaděčů je napsána komunitou, seznam oblíbených zavaděčů najdete zde.

Řekněme, že chceme do našeho projektu přidat linter, který kontroluje chyby v našem kódu JS. Můžeme tak učinit zahrnutím zavaděče JSHint, který zachytí všechny druhy špatných praktik a pachů kódu.

Nejprve musíme nainstalovat JSHint a webpack JSHint loader:

npm install jshint jshint-loader --save-dev

Dodatečně přidáme několik řádků do našeho konfiguračního souboru webpacku. To inicializuje zavaděč, řekne mu, jaký typ souborů má zkontrolovat a které soubory ignorovat.

webpack.config.js

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // Add the JSHint loader
  module: {
    rules: [{
      test: /\.js$/, // Run the loader on all .js files
      exclude: /node_modules/, // ignore all files in the node_modules folder
      use: 'jshint-loader'
    }]
  }
};

Nyní, když je webpack spuštěn, zobrazí nám seznam varování v terminálu (která budeme ignorovat):

Od moment.js se nachází v node_modules složka, nebude linkována zavaděčem JSHint:

Další čtení

Tímto končíme naše představení webového balíčku! Protože se jedná o lekci pro začátečníky, pokusili jsme se pokrýt pouze ty nejužitečnější a nejnutnější pojmy webového balíčku. Doufáme, že výukový program byl užitečný, nebyl příliš matoucí a do 15 minut od názvu.

V blízké budoucnosti plánujeme přidat do tohoto tutoriálu druhou část, vysvětlující, jak pracovat s moduly CSS a dalšími pokročilejšími funkcemi. Mezitím, pokud se chcete o webpacku dozvědět více (a je toho mnohem více), doporučujeme prozkoumat tyto úžasné zdroje:

• webpack.js.org – Oficiální webové stránky projektu, na kterých je k dispozici spousta průvodců a dokumentů.
• Úžasný webpack – spravovaný seznam zdrojů webpacku.
• Webpack 2 – Kompletní výukový program – Téměř dvouhodinový bezplatný výukový výukový program.
• Příklady webových balíků – seznam různých konfigurací webových balíků.