Webový balíček pro nešikovné 🧐

Index

  1. Požadavky na výuku Webpack
  2. Co je webový balíček?
  3. Proč je užitečné zabalit náš kód?
  4. Webpack 5
  5. Instalace
  6. webpack.config.js
  7. Klíčové body webového balíčku
  8. Odkazy
  9. Závěry

Požadavky na výuku Webpack

Webpack, jakožto pokročilejší webová technologie, bude složitý a dokonce frustrující pokus o jeho prostudování a pochopení bez předchozích znalostí, doporučujeme znát následující body:

  • HTML5
  • CSS3
  • Moderní JavaScript (ES6 vpřed)
  • Základy Node.js (není nutné, ale velmi užitečné)

Co je webový balíček?

Podle oficiální dokumentace je webpack obal statického modulu pro javascriptové aplikace
Porozumět souborům statických modulů:

  • Soubory .js ,
  • Kód .css čisté nebo používající preprocesory jako sass , less , post-css atd.
  • Obrázky v různých formátech:.png , .jpg atd.
  • Šablonové moduly jako pug .

Proč je užitečné zabalit náš kód?

Důvody, proč je použití webpacku dobrý nápad:

  • Máte produktivnější vývojové prostředí.
  • Webpack vám umožňuje spravovat všechny statické soubory projektu efektivněji.
  • Je široce používán současnými frontend frameworky a knihovnami jako React , Úhel nebo Vue .
  • Umožňuje nám upravit náš kód a připravit jej k nasazení do produkce.
  • Umožňuje používat importy a export moderního javascriptu ke správě našeho kódu javascript jednoduchým způsobem.
  • Je rozšiřitelná a modulární , protože potřebujeme více funkcí, můžeme jej nakonfigurovat tak, aby vyhovoval potřebám projektu.

Webpack 5

10. října 2020 byla vydána verze 5 webpacku, tato verze je nejaktuálnější a nejstabilnější, takže pro nové projekty ji doporučujeme používat. Více informací o této aktualizaci (často kladené otázky, jak migrovat z webpacku 4 na webpack 5 atd.) samozřejmě najdete v oficiální dokumentaci

Instalace

Pro správnou funkci webpacku potřebuje instalaci 2 vývojových závislostí :

  • webpack
  • webpack-cli
npm i webpack webpack-cli -D

webpack.config.js

Jedná se o speciální konfigurační soubor, který má webpack, kde si můžeme výslovně zapsat všechna pravidla balení, se kterými bude projekt pracovat; Není to nic jiného než javascriptový objekt, kde pomocí vlastností klíč–hodnota nakonfigurujeme odpovídající aplikaci.

Klíčové body webového balíčku

Abyste pochopili webpack, musíte pochopit 5 základních bodů:

Záznam

Entry je vstupní bod naší aplikace, jinými slovy označuje hlavní soubor, který aplikaci spouští.
Ve výchozím nastavení má webpack cestu ./src/index.js jako vstupní soubor, ale můžete nastavit jakoukoli jinou relativní cestu, kterou chcete.

//webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',
};

Výstup

Output je výstupní bod aplikace, který říká webovému balíčku, kam má uložit soubory připravené k produkci, jako jsou soubory .js , .html a .css
Ve výchozím nastavení jsou tyto soubory uloženy v cestě ./dist/main.js ale je možné zadat jakoukoli jinou absolutní cestu .
V konfiguračním souboru by to vypadalo takto:

//webpack.config.js
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

Kde:

Načítače

Ve výchozím nastavení webpack funguje pouze se soubory .js. a .json , ale všichni víme, že všechny webové stránky mají HTML A CSS, tak jak to napravíme? Odpovědí jsou Nakladače

Zavaděče umožňují webpacku zpracovávat jiné typy souborů do modulů připravených pro výrobu.

Velmi obecně se nakladač skládá ze 2 hlavních částí:

  • test :určuje, jaké typy souborů by měly být transformovány, obvykle regulární výraz
  • use :označuje samotný zavaděč, který by měl být použit k provedení výše uvedené transformace.

Podívejme se na příklad v našem konfiguračním souboru:

//webpack.config.js
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
     rules: [
         {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
         },
     ],
  },
};

Důležité aspekty ke zvážení:

  • Všimněte si, jak jsou zavaděče načteny do objektu module které mají pole rules .
  • Regulární výraz test: /\.txt$/ musí být bez jednoduchých nebo dvojitých uvozovek.
  • Příkladové pravidlo vypadá asi takto:webpack, vím, že nerozumíte .css souborům , proto vám dávám zavaděč s názvem style-loader a další s názvem css-loader pro použití ve všech souborech .css projektu.
  • Pořadí nakladačů je důležité.
  • Aby konfigurace fungovala uspokojivě, musí být respektováno pořadí pravidel, test musí být na prvním místě a poté use .

Pluginy

Snad nejsnáze pochopitelný koncept, protože jeho samotný název je docela popisný.
V podstatě plugins jsou zodpovědní za rozšíření funkcí, které webpack ve výchozím nastavení nemá, jako je optimalizace balíčků, správa souborů, například HTML a CSS, a zpracování proměnných prostředí.

Podívejme se na náš konfigurační soubor pomocí pluginů:

//webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //dependencia instalada via npm
const webpack = require('webpack'); //acceso a los 23 plugins que webpack trae por defecto

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
      rules: [
          {
             test: /\.css$/i,
             use: ["style-loader", "css-loader"],
          },
      ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

Body ke zvážení:

  • V tomto příkladu musíte nejprve nainstalovat a importovat plugin html-webpack-plugin od npm dělá:npm i html-webpack-plugin
  • Pluginy potřebují k použití instanci, takže uděláme new HtmlWebpackPlugin() a předáme vlastnost template a naznačíme trasu našeho index.html
  • Protože webpack ve výchozím nastavení neumožňuje výstup souborů .html potřebujeme tento plugin.

Režim

Sděluje webpacku, jakým způsobem chcete kód zabalit.
Může být v režimu production :

module.exports = {
  mode: 'production',
};

Kde budou všechny naše výstupní soubory minifikovány.
Nebo může být v režimu development :

module.exports = {
  mode: 'development',
};

Kde všechny naše výstupní soubory nejsou minifikovány.

Typ a základní konfigurační soubor webpacku bude vypadat takto:

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //dependencia instalada via npm

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
  mode: 'production',
  module: {
      rules: [
         {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
         },
     ],
  },
  // más reglas...
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  // más plugins...
};

Odkazy

  • Oficiální dokumentace
  • Webový balíček 4, Praktický kurz | Fazt
  • Naučte se webpack krok za krokem | Midudev

Závěry

  • Webpack je pravděpodobně nejoblíbenější frontend modul wrapper.
  • Chcete-li používat webpack, musíte nainstalovat 2 závislosti:webpack a webpack-cli
  • Konfigurace Webpacku musí být provedena v souboru webpack.config.js který je vytvořen v kořenovém adresáři projektu.
  • Webpack má 5 základních bodů:entry , output , loaders , plugins a mode .
  • Naučit se základnímu webovému balíčku je poměrně snadné, ale jak váš projekt roste a stává se složitějším, webový balíček bude také potřebovat složitější konfigurace. Tento příspěvek je pouze úvodní.

Následující články by vás mohly zajímat: