Úvod do Webpack: co to je a jak jej používat

Úvod

Dobře, takže předpokládám, že jste už slyšeli o webpacku - proto jste tady, že? Skutečnou otázkou je, co o tom víte? Možná o tom víte několik věcí, například jak to funguje, nebo můžete mít naprostou stopu. Ať tak či onak, mohu vás ujistit, že po přečtení tohoto článku se budete pravděpodobně cítit dostatečně pohodlně s celou situací webpack.

Koneckonců - nutností je matka vynálezu ...

Dokonalý způsob, jak říct, proč webpack existuje, je výše uvedená nabídka. Abychom to pochopili lépe, musíme se vrátit zpět, zpět, když JavaScript nebyl novou sexy věcí, v těch starých časech, kdy byl web jen malý svazek starých dobrých .html, CSS a pravděpodobně jeden nebo v některých případech málo souborů JavaScript. Ale velmi brzy se to všechno změnilo.

Jaký byl problém?

Celá komunita dev se podílela na neustálém úsilí o zlepšení celkového zážitku uživatelů a vývojářů při používání a vytváření javascriptových / webových aplikací. Proto jsme viděli spoustu nových knihoven a rámců zavedených.

Postupem času se také vyvinulo několik návrhových vzorů, které vývojářům poskytovaly lepší, výkonnější a zároveň velmi jednoduchý způsob psaní složitých aplikací JavaScriptu. Webové stránky dříve nebyly jen malým balíčkem s lichým počtem souborů v nich. Uvedli, že se zavedením modulů JavaScriptu dostávali objemně, protože novým trendem bylo psaní zapouzdřených malých kousků kódu. Nakonec to všechno vedlo k situaci, kdy jsme v celkovém aplikačním balíčku měli 4x nebo 5x souborů.

Nejen, že celková velikost aplikace byla výzvou, ale také byla velká mezera v tom, co psali vývojáři kódu a jaký druh prohlížečů kódů mohl rozumět. Vývojáři museli použít mnoho pomocných kódů zvaných polyfills, aby se ujistili, že prohlížeče byly schopny interpretovat kód v jejich balíčcích.

K vyřešení těchto problémů byl vytvořen webpack. Webpack je statický modul modulátor.

Jak tedy odpověděl Webpack?

Stručně řečeno, Webpack prochází vaším balíčkem a vytváří to, co nazývá graf závislosti, který se skládá z různých modulů, které by váš webapp vyžadoval, aby fungoval podle očekávání. Poté v závislosti na tomto grafu vytvoří nový balíček, který se skládá z velmi holého minimálního počtu požadovaných souborů, často jen z jednoho souboru bundle.js, který lze snadno připojit k souboru html a použít pro aplikaci.

V další části tohoto článku vás provedu krok za krokem nastavením webpacku. Na konci toho doufám, že rozumíte základům Webpacku. Tak si to nechte projít…

Co stavíme?

Pravděpodobně jste slyšeli o ReactJS. Pokud víte, reajS, pravděpodobně víte, co je create-reagovat-app. Pro ty z vás, kteří nemají tušení, co je jedna z těchto dvou věcí, je ReactJS knihovna UI, která je velmi užitečná při vytváření inteligentních komplexních uživatelských rozhraní, a create-response-app je nástroj CLI pro nastavení nebo bootstrapování nastavení kotlové desky dev vytvářet aplikace React.

Dnes vytvoříme jednoduchou aplikaci React, ale bez použití rozhraní CLI pro vytvoření a reakci. Doufám, že vám to zní dost zábavně. :)

Fáze instalace

npm int

To je pravda, tak začínají téměř všechny dobré věci: prostý starý npm init. Budu používat VS kód, ale neváhejte použít jakýkoli editor kódu, který chcete začít.

Než budete moci něco udělat, přemýšlejte, ujistěte se, že máte na svém počítači nainstalovanou nejnovější verzi nodeJS a verzi npm. Kliknutím na každý z těchto odkazů získáte další informace o procesu.

$ npm init

Tím vytvoříte startovací balíček a přidáte pro nás soubor package.json. Zde budou zmíněny všechny závislosti potřebné pro vytvoření této aplikace.

Nyní pro vytvoření jednoduché aplikace React potřebujeme dvě hlavní knihovny: React a ReactDOM. Pojďme je tedy přidat jako závislosti do naší aplikace pomocí npm.

$ npm i Reaguj rea-dom - uložit

Dále musíme přidat webpack, abychom mohli naši aplikaci spojit dohromady. Nejen svazek, ale budeme také vyžadovat hotloading, který je možný pomocí webového serveru devpack.

$ npm i webpack webpack-dev-server webpack-cli --save - dev

--Save - dev má specifikovat, že tyto moduly jsou pouze závislostmi dev. Nyní, když pracujeme s Reactem, musíme mít na paměti, že React používá třídy ES6 a importní příkazy, což je něco, co nemusí všechny prohlížeče rozumět. Abychom zajistili, že kód bude čitelný ve všech prohlížečích, potřebujeme nástroj, jako je babel, který převede náš kód do běžného čitelného kódu pro prohlížeče.

$ npm i babel-core babel-loader @ babel / preset-reagovat @ babel / preset-env html-webpack-plugin --save-dev

Co mohu říci, to byl maximální počet instalací, které slibuji. V případě babelu jsme nejprve naložili základní knihovnu babelů, poté zavaděč a nakonec 2 pluginy nebo předvolby, které budou pracovat konkrétně s Reactem a se všemi novými kódy ES2015 a ES6.

Jdeme dál, přidáme nějaký kód a začneme konfigurovat webpack.

Takto by se soubor package.json měl starat o všechny dosavadní instalace. Možná budete mít jiné číslo verze v závislosti na tom, kdy sledujete tento článek.

Kód

Začněme přidáním souboru webpack.config.js do kořene naší struktury aplikace. Přidejte následující kód do svého souboru webpack.config.

const cesta = vyžadovat ('cesta');
const HtmlWebpackPlugin = vyžadovat ('html-webpack-plugin');
module.exports = {
  // Tato vlastnost definuje, kde se aplikace spustí
  položka: './ src / index.js',
  // Tato vlastnost definuje cestu k souboru a název souboru, který bude použit pro nasazení sdruženého souboru
  výstup:{
    path: path.join (__ dirname, '/ dist'),
    název souboru: 'bundle.js'
  },
  // Nastavení zavaděčů
  modul: {
    pravidla: [
      {
        test: /\.js$/,
        vyloučit: / node_modules /,
        použití: {
          loader: 'babel-loader'
        }
      }
    ]
  },
// Instalační zásuvný modul pro použití souboru HTML pro poskytování svazovaných souborů js
 pluginy: [
    nový HtmlWebpackPlugin ({
      template: './src/index.html'
    })
  ]
}

Dobře, pojďme pochopit výše uvedené řádky.

Nejprve začneme vyžadováním výchozího modulu cesty pro přístup k umístění souboru a provedení změn umístění souboru.

Dále vyžadujeme, aby HTMLWebpackPlugin vygeneroval soubor HTML, který bude použit pro poskytování svázaného souboru / souborů JavaScript. Další informace o HTMLWebpackPlugin získáte kliknutím na odkaz.

Potom máme objekt export.module s některými vlastnostmi. První z nich je vlastnost entry, která slouží k určení, ke kterému souboru webpack by měl začít, aby se vytvořil interní graf závislosti.

module.exports = {
  položka: './ src / index.js'
}

Další nahoře je vlastnost output, která určuje, kde by měl být vytvořen sdružený soubor a jaký by měl být název sdruženého souboru. To se provádí vlastnostmi output.path a output.filename.

module.exports = {
// Tato vlastnost definuje cestu k souboru a název souboru, který bude použit pro nasazení sdruženého souboru
  výstup:{
    path: path.join (__ dirname, '/ dist'),
    název souboru: 'bundle.js'
  },
}

Další jsou nakladače. Tímto se určí, co by měl webpack dělat pro konkrétní typ souboru. Nezapomeňte, že webpack out of box chápe pouze JavaScript a JSON, ale pokud váš projekt používá jiný jazyk, bylo by to místo, kde byste mohli určit, co s tímto novým jazykem dělat.

module.exports = {
// Nastavení zavaděčů
  modul: {
    pravidla: [
      {
        test: /\.js$/,
        vyloučit: / node_modules /,
        použití: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

Informace by měly být specifikovány v objektu pro každou vlastnost modulu, která má dále řadu pravidel. Bude existovat objekt pro každý případ. Také jsem určil vyloučit vše ve své složce node_modules.

Další je vlastnost pluginu. Slouží k rozšíření možností webpacku. Než bude moci být plugin použit v poli pluginů uvnitř objektu exportujícího modul, musíme to vyžadovat.

module.exports = {
// Instalační zásuvný modul pro použití souboru HTML pro poskytování svazovaných souborů js
 pluginy: [
    nový HtmlWebpackPlugin ({
      template: './src/index.html'
    })
  ]
}

Tento konkrétní plugin, jak bylo vysvětleno výše, použije zadaný soubor v naší složce src. Poté to použije jako šablonu pro náš soubor HTML, do kterého budou automaticky vloženy všechny spojené soubory. Existuje mnoho dalších doplňků z krabice, které bychom mohli použít - další informace najdete na oficiální stránce.

Poslední věcí, kterou musíme udělat, je vytvořit soubor .babelrc, aby bylo možné použít přednastavení babel, které jsme nainstalovali, a starat se o třídy ES6 a příkazy importu v našem kódu. Přidejte následující řádky kódu do souboru .babelrc.

{
  "předvolby": ["env", "reagovat"]
}

A právě tak nyní bude babel moci používat tyto předvolby. Dobře, takže nastavení - přidáme nějaký kód React, abychom viděli, jak to funguje.

Kód reakce

Protože výchozím bodem aplikace je soubor index.js ve složce src, začněme s tím. Začneme tím, že budeme v našem případě vyžadovat React a ReactDOM. Přidejte do svého souboru index.js níže uvedený kód.

import Reagovat z 'reagovat';
importovat ReactDOM z 'Reagovat';
importovat aplikaci z './Component/App';
ReactDOM.render (, document.getElementById ('app'));

Takže jednoduše importujeme další soubor z naší složky se složkami, který vytvoříte, a přidáme další soubor do složky nazvané App.js. Podívejme se tedy, co je uvnitř souboru App.js:

importovat React, {Component} z 'reagovat'
třída aplikace rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      
        

Nastavení Webpack + React

      
    )   } }
exportovat výchozí aplikaci;

Už jsme skoro hotovi. Jediné, co zbývá, je povolit horké nabíjení. To znamená, že pokaždé, když je zjištěna změna, prohlížeč automaticky načte stránku a má schopnost sestavit a seskupit celou aplikaci, až přijde čas.

Toho můžeme dosáhnout přidáním hodnot skriptu do souboru package.json. Odeberte vlastnost test v objektu scripts souboru package.json a přidejte tyto dva skripty:

"start": "webpack-dev-server - vývoj módu - otevřený --hot",
"build": "webpack - výroba módu"

Jste všichni připraveni! Přejděte na svůj terminál, přejděte do kořenové složky a spusťte npm start. Měl by ve vašem počítači spustit dev server a v prohlížeči zobrazit soubor HTML. Pokud provedete drobné / velké změny a uložíte kód, váš prohlížeč bude automaticky aktualizován a zobrazí nejnovější sadu změn.

Jakmile si myslíte, že jste připraveni přibalit aplikaci, stačí stisknout příkaz, npm build a webpack vytvoří optimalizovaný balíček ve vaší projektové složce, který lze nasadit na libovolný webový server.

Závěr

Toto je jen malá aplikace nebo případ použití webpacku a babelu, ale aplikace jsou neomezené. Doufám, že jste natolik nadšeni, že prozkoumáváte více možností a způsobů, jak dělat věci s webpackem a babelem. Další informace a podrobné informace naleznete na jejich oficiálních webových stránkách.

Vytvořil jsem reprosoustavu Github s veškerým kódem v něm, proto se prosím obraťte na případné dotazy.

Moje dva centy o webpacku? Dobře, občas si můžete myslet, že to není nic víc než nástroj, a proč byste se měli na nástroj příliš obtěžovat? Ale věřte mi, když říkám toto: počáteční boj při učení vaší cesty kolem webpacku vám ušetří obrovské množství hodin, které byste jinak investovali do vývoje bez webpacku.

To je prozatím vše, doufám, že se brzy vrátíme k dalšímu zajímavému článku. Doufám, že jste si tento čtení užili!

V případě, že se při provádění některého z výše uvedených kroků / procesů setkáte s jakýmkoli problémem nebo problémem, neváhejte nás kontaktovat a zanechat komentáře.

LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/

Twitter: https://twitter.com/ashishnandansin