Úvod > Blog > Články > Programování > Webpack - minimum >

Webpack - minimum

29.01.2019 Programování #webpack #react #programovani

Minimální nastavení webpacku pro jednoduchý projekt v reactu.

Současný svět vývoje webových stránek je na vzestupu se skvělými nástroji a balíčky, které můžete použít pro vaše webové aplikace. Některé důležité části spočívají zejména ve spojování webových aplikací, manipulaci s minimalizací souborů a souvisejících úkolů pro tvorbu a v neposlední řadě živých aktualizací.

V poslední době je na vzestupu Webpack kvůli bezproblémovému používání, jakým funguje, a protože to není jen úloha, ale umožňuje velkou správu závislostí, která ve většině nástrojů (Gulp, Grunt) nebyla hlavní záležitostí. Jedním z důvodů proč používat webpack je i to, že některé z vývojových týmů, jako je Angular, také přešli na tento balíček kvůli výkonu a vlastnostem.

Prvním krokem k používání webpacku je nainstalování NodeJS. Přítomnost můžete zkontrolovat, spuštěním příkazu v terminálu:

node --version

Lokální instalace

Jako první se nainstalují webpack a webpack-dev-server. Je doporučené instalovat webpack lokálně. Při globální instalaci by nemuseli fungovat projekt se specifickou verzí webpacku.

npm install --save-dev webpack
    npm install --save-dev webpack@<version>

Globální instalace

Následující NPM instalace zpřístupní webpack globálně:

npm install --global webpack

Po instalaci vytvořte adresář projektu. Použijeme jméno např. demo-webpack pro tento projekt. 

mkdir webpack-demo
    cd webpack-demo

Vytvoření projektu

Do výše založeného adresáře vytvořte pomocí některého editoru soubor index.html s následujícím obsahem:

<! DOCTYPE html> 
<html lang = "en"> 
  <head> 
    <meta charset = "UTF-8"> 
    <title> Základní aplikace s Webpack </ title> 
    <link href = "main.css"> 
  </ head > 
  <body> 
    <h1> WebPack funguje! </ 
    script> </ script> 
  </ body> 
</ html>

Potom vytvořte soubor main.js. V html kódu je cesta k JS souboru pod názvem bundle.js. Tento soubor bude vytvořený právě pomocí webpack. Obsah souboru main.js je následující:

console.log("Hello webpack. Demo works");

V příkazovém řádku spusťte následující příkaz:

webpack main.js bundle.js

Výstup by mohl vypadat takto:

Hash: ec10d1136042776794c4 
Verze: webový balíček 2.6.1 
Čas: 71ms 
    Rozměry aktiv Chunks Chunk Názvy 
bundle.js 2.65 kB 0 [emitted] main 
   [0] ./main.js 19 bytes {0} [built]

Pokud otevřete v prohlížeči Chrome index.html a otevřete i ladicí program, vypadá to takto

Můžete také vytvořit soubor css, který je součástí index.html. Takže vytvořte main.css v kořenovém adresáři projektu a přidejte některé ukázkové styly.

body{
  background: #dcdcdc;
}
h1{
  color: blue;
}

Používání konfiguračního souboru webpack

Konfigurační soubor webpack.config.js umožňuje značné zjednodušení všech činností. Například nám to použít příkaz webpack bez specifikace zdroje (main.js) a cíle (bundle.js), protože vše je nastaveno právě v konfiguračním souboru. V projektu vytvořte soubor webpack.config.js a přidejte do něj následující základní konstrukci:

module.exports = {
  entry: './main.js',
  output: {
    filename: './bundle.js'
  }
};

Konfigurace je velmi jednoduchá. entry direktiva, která bude kořenem grafu závislostí a udává vstupní zdroj pro webový soubor, kde output obsahuje filename což je výstupní soubor, který je připojen v html, jak je ukázáno výše. Takže jakmile to máte konfigurační soubor vytvořený, zkuste v terminálu spustit příkaz webpack z kořenového adresáře projektu. Měli byste získat stejný výstup jako na konzoli.

Sledujte a budujte

Můžeme zajistit, aby WebPack dával pozor na vaše soubory a spustil proces sestavení jakmile se v nich něco změnilo. Stačí přidat watch: true v našem konfig. souboru webpack.config.js. Váš soubor by měl vypadat takto

module.exports = {
  entry: './main.js',
  output: {
    filename: './bundle.js'
  },
  watch: true
};

Příkaz můžete spustit příkazem webpack a pokud změníte něco ve vašem main.js, webový balíček zkompiluje a vytvoří bundle.js.

Vývojový server

Klasické otevření index.html v prohlížeči neustálým reloadováním stránky je sice funkční, ale změny provedené v načítaných souborech lze registrovat modernější formou. Lze k tomu použít webpack-dev-server, který jsme nainstalovali dříve. To přichází s malou express aplikací, takže stačí zadat JS soubor a jste připraveni ke spuštění. Jen v kořenovém projektu z terminálu spusťte příkaz

webpack-dev-server

Váš projekt nyní můžete vidět na http://localhost:8080/webpack-dev-server/

Je úžasné, že pokud dojde k nějakým změnám v souboru main.js nebo v main.css, server je zaregistruje a okamžitě zobrazí bez nutnosti ctrl+R / command+R.

Loadery

Loadery mohou být považovány za úkoly, které lze použít například v nástrojích Gulp nebo Grund. Mohou být použity k tomu, require() aby nahrávali jiné moduly a soubory. Webpack neobsahuje žádné přímé loadery a to může působit nepříjmně, ale existuje mnoho loaderů, které lze nainstalovat pomocí npm nebo yarn. Pro tento program budeme používat npm a použijeme babel-loader pro psaní nějakého kódu ES6, dále css-loader a style-loader pro import našeho main.css do souboru main.js.

Otevřete terminál z kořenového adresáře projektu a proveďte následující příkazy.

npm init -y 
npm instalace - save-dev babel-loader babel-jádro babel-preset-env 
npm instalace - save-dev css-loader style-loader

npm init -y vytváří ve vašem projektu package.json, který použijeme k podchycení vývojových závislostí a přidání loaderů do našeho projektu.

npm install --save-dev babel-loader css-loader style-loader nainstaluje tyto moduly a npm je uloží do složky node_modules v našem projektu.

Nyní, abychom mohli pracovat s nainstalovanými moduly, musíme o tom informovat v souboru webpack.config.js aby je používali při vytváření sestav nebo při běhu webového serveru. Uděláme to úpravou konfiguračního souboru následujícím způsobem:

module.exports = { 
  entry: './main.js', 
  výstup: { 
    název_souboru: './bundle.js' 
  }, 
  hodinky: true, 
  modul: { 
    rules: 
    {{ 
      test: /\.css$/, 
      use : [ 
        {nakladač: "stylu-nakladače"}, 
        {nakladač: "css-nakladače"} 
      ] 
    }, { 
      test: /\.js$/, 
      zahrnují: / (node_modules | bower_components) /, 
      použití: { 
        nakladač: ' babel-loader ', 
        volby: { 
          přednastavení: [' env '] 
        } 
      } 
    }] 
  } 
};

Nyní můžeme v našem, main.js napsat kód ES, který se bude kompilovat do ES5. Změňte obsah souboru main.js na následující

import stylu z './main.css';
const appName = 'Aplikace Webpack Demo'; 
setTimeout ( 
  () => výstraha ("Díky za použití $ {appName}") 
, 500);

Výše uvedený kód bude kompilován do javascriptu ES5 a bude zahrnut v bundle.js

Pro css můžeme odstranit < link href="main.css > ze souboru index.html, protože jsme ji již importovali pomocí main.js

#webpack #react #programovani