Webpack

Webpack

Webpack to narzędzie do bundlowania modułów i zależności. Dzięki niemu możesz z wielu plików projektu stworzyć pojedyncze pliki danego rodzaju gotowe do użycia w różnych środowiskach. Szczegółowe informacje na temat Webpacka znajdziesz na jego oficjalnej stronie: https://webpack.js.org/configuration/

Instalacja

Aby zainstalować Webpack użyj NPM lub Yarn:

npm install webpack --save-dev

Poza tym przydatny będzie webpack-cli - narzędzie wiersza poleceń do uruchamiania webpacka:

npm install webpack-cli --save-dev

Konfiguracja

Aby skonfigurować webpacka przydatny będzie plik z konfiguracją. Przykładowa konfiguracja może wyglądać następująco:

const path = require('path');

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

Uruchamianie bundlera

Aby uruchomić bundlowanie wskazując na konkretny plik z konfiguracją użyj polecenia:

npx webpack --config plik_z_konfiguracja_webpacka.config.js

Loadery

Webpack pozwala na wiele zaawansowanych technik bundlowania plików przy pomocy tzw. loaderów. Możesz dzięki nim ładować plik SASS lub LESS (preprocesory CSS) a następnie transpilować do CSS zrozumiałego przez przeglądarki. Możesz także wykonywać rozmaite inne operacje na danych przechwytując ich treść i odpowiednio zwracając do dalszej części bundlowania.

Aby wykonywać tego typu operacje po zainstalowaniu interesującego nas loadera (można je odnaleźć w repozytoriach npm) w konfiguracji webpacka konfigurujemy sekcję module jak w przykładzie poniżej:

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ],
        }
    }
}

W powyższym przykładzie widać, że wykorzystano dwa dodatkowe loadery style-loader i css-loader. Pojedyncza definicja wskazująca na loader składa się z obiektu zawierającego test będący wyrażeniem regularnym porównywanym na każdym bundlowanym pliku oraz tablicy use z nazwą zainstalowanych loaderów.

Source mapy

Source mapy to pliki, które zawierają instrukcje dla narzędzi programistycznych w jaki sposób poszczególne pliki zostały przekształcone. Dzięki nim w narzędziach programistycznych możliwe jest przeglądanie plików, które zostały przekształcone przez między innymi przez webpack. Domyślnie takie mapy nie są pobierane przez przeglądarki zatem proces zmniejszania kodu wraz z wygenerowaniem source mapy niesie sporo korzyści związanych z mniejszym rozmiarem pliku jak szybsze pobranie pliku przez użytkownika, niższe koszty transferu danych na serwerze i mniejsze koszta przechowywania plików.

Aby generować source mapy w webpacku w pliku z konfiguracją możesz przykładowo dodać zapis devtool: 'inline-source-map' jak poniżej:

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ],
        }
    }
}

Generowanie source map przydatne jest w produkcyjnych konfiguracjach webpacka. Na potrzeby developmentu powinno unikać się zbytnich transformacji plików aby maksymalnie przyspieszyć proces bundlowania.

Watch mode

W trybie watch mode webpack nasłuchuje na zmiany w plikach i po każdej takiej zmianie wykonuje operację bundlowania ponownie. Aby uruchomić watch mode przy uruchamianu procesu webpacka dodaj flagę --watch np.

webpack --watch

DevServer

Przy pomocy rozszerzenia webpack-dev-server możesz uruchomić serwer na czas developmentu, który będzie serwował bundlowane pliki z poziomu prostego serwera HTTP. Dzięki temu możesz wystawić proste zmockowane API i testować żądania z tworzonej aplikacji.

Aby zainstalować webpack-dev-server użyj NPM lub Yarn:

npm install webpack-dev-server --save-dev

A następnie skonfiguruj go w pliku konfiguracyjnym jak na przykładzie:

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      port: 3000
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ],
        }
    }
}

W powyższym przykładzie serwowane na serwerze pliki będą pochodzić z katalogu dist a web server uruchomi się na porcie 3000 na localhoście.

Ćwiczenia

Ćwiczenie 1 - Przygotuj konfigurację Webpacka, która będzie bundlowała aplikację do użytku w przeglądarce mimo używania importów i eksportów między plikami.

  • Załóż, że plikiem wejściowym jest app.js, który importuje bibliotekę moment.js i zwraca do konsoli ilość godzin od rozpoczęcia aktualnego w danym momencie roku.
  • Moment.js zainstaluj przy pomocy NPM lub Yarna a następnie zbundluj ze skryptem w app.js aby można było go uruchomić w przeglądarce.
school Mentoring

Masz pytania lub wątpliwości? Coś jest niejasne? Napisz na: codehubpl@gmail.com


© 2020 CodeHub.pl