Skip to main content

Webpack

>>>>>>>>>>>>>>>>>>>>>>>>>>Co oznacza Webpack?

Webpack to tak zwany „codebundler”, który służy przede wszystkim do łączenia różnych plików skryptów Javaw celu wykorzystania ich w przeglądarce.

Podział kodu i JavaScript

Środowisko uruchomieniowe NodeJS, w kontekście którego JavaScript może być używany po stronie serwera, od samego początku wspierało podział kodu JavaScript na moduły wykorzystujące CommonJS. CommonJS umożliwia podzielenie kodu na zależne moduły i ładowanie ich niezależnie od siebie w razie potrzeby. Podział na niezależne moduły i podział kodu jest dokonywany głównie w celu lepszego zarządzania i łatwiejszego administrowania kodem programu. Jest to powszechna praktyka inżynierska, stosowana od dziesięcioleci w różnych językach programowania, takich jak Java, C++ czy Python. Bez względu na to, w jakiej przeglądarce internetowej jest używany JavaScript, język skryptowy nie obsługuje podziału kodu.

Moduły dla przeglądarki internetowej

W tym miejscu do gry wchodzi Webpack. Codebundler zapewnia wsparcie dla dzielenia kodu w przeglądarce internetowej poprzez ładowanie na żądanie niezależnych modułów, tak jakby były one przeznaczone do użycia w środowisku NodeJS. Zmodularyzowany kod jest najpierw analizowany i przetwarzany przez Codebundler, a następnie wykorzystywany do stworzenia pakietu, który może być dynamicznie ładowany w razie potrzeby. Dodatkowo, bundler pozwala nam na używanie pakietów npm jako modułów, takich jak jQuery czy React. Nie muszą być one wtedy osadzane jako pojedyncze skrypty w dokumencie HTML, co przynosi wiele korzyści, takich jak:

  • brak zmiennych globalnych
  • brak outscopingu
  • kod staje się dużo bardziej zarządzalny i przewidywalny

Konfiguracja Webpack

Konfiguracja realizowana jest w postaci modułu NodeJS, który eksportuje tzw. obiekt Config. Może on zawierać dowolny kod skryptu Java, co otwiera przed programistami wiele różnych możliwości. Na przykład, plik wejściowy dla Codebundlera może być dynamicznie ładowany z systemu plików w razie potrzeby. Obiekt konfiguracyjny zawiera cztery ważne słowa kluczowe:

Wejście

Są to ustawienia wejściowe. Dzięki temu programiści mogą przekazać Codebundlerowi dokładne instrukcje, od czego zacząć tworzenie pakietów. Przykład konfiguracji wpisu:

/module.exports={
/context:path.resolve(__dirname),
/entry: [’./index.js’,
/entry: [’./index.js’, ’./login.js’],
/wejście: {
/index: ’./index.js’,
/login: ’./login.js’,
/},
/}

Wyjście

Jest to obiekt z kluczami do sterowania wyjściem Webpack. Przykład dla Output-Config:

/module.exports={
/context:path.resolve(__dirname),
/entry: [’./index.js’,
/entry: [’./index.js’, ’./login.js’],
/wejście: {
/index: ’./index.js’,
/login: ’./login.js’,
/},
/output:{
/path:path.join(__dirname,’build’),
/publicPath:’/’,
/filename:’bundle.js’,
/filename: „[nazwa].js”,
/filename: '[chunkhash].js’,
/}
/}

Ładowarka

Są to transformacje, które mogą być użyte do dostosowania konfiguracji poszczególnych modułów, zanim zostaną one złożone w pakiet. Przykład zastosowania ładowarki:

/module.exports={
/moduł:{
/rules:[
/{
/test:/.js$/
/użycie:[
/{
/loader:[ /{ babel-loader,
/options:{
/presets:[ 'react’]
/}
/}
/]
/},
/{
/test:/.sass$/,
/użycie:[
/{
/loader: 'style-loader’,
/},
/{
/loader:’css-loader’,
/},
/{
/loader:’sass-loader’,
/}
/]
/}
/]
/}
/}

Wtyczki

Wtyczki to transformacje, które są stosowane w każdym pakiecie. Są one wykorzystywane np. dla funkcjonalności, które nie są obsługiwane przez program ładujący. Przykład konfiguracji wtyczki:

/module.exports={
/plugins:[
/newExtractTextPlugin({
/nazwa:’bundle.css’
/}),
/newwebpack.optimize.UglifyJsPlugin({
/minimize:true
/}),
/]
/}

Wnioski zespołu OM Optimiser

Webpack jest codebundlerem, który umożliwia modularyzację kodu programu na poziomie frontend, co przyczynia się do lepszego zarządzania i łatwiejszej administracji kodem programu.

Masz jeszcze jakieś pytania?

Prosimy o kontakt z nami


Dalsze treści