Webpack #1 - wprowadzenie

Najpopularniejszymi bibliotekami do budowania modularnej aplikacji w języku JavaScript są GulpJS oraz Browserify lub RequireJS. W tym poście postaram się przedstawić nowego gracza, z którym nie miałem wcześniej przyjemności. Poczytajcie o WebpackJS.

Co już wiemy

Każdy kto choć raz spotkał się z problemem zbudowania bardziej skomplikowanej aplikacji, podzielonej na moduły musiał korzystać z menadżera zadań Grunt/Gulp i biblioteki do tworzenia wyjściowej aplikacji z modułów pokroju Browserify/RequireJs. Są to złożone biblioteki składające się z dużej ilości mniejszych modułów. Nie będę się rozwodzić na tematy jak ich używać bo nie to jest przedmiotem tego posta. W tym momencie chciałbym abyście zapomnieli o wszystkim co wiecie na ten temat i przeczytali o Webpack'u.

Webpack - nowe podejście

Jest to biblioteka napisana w monolitycznym stylu. To znaczy, cała jej funkcjonalność jest wbudowana w rdzeń, który można rozszerzać pluginami i loaderami. Podejście takie eliminuje mnogość wewnętrznych zależności.

Do uruchomienia Webpacka nie jest też konieczny żaden menadżer zadań. Wszystko co potrzebne dostarcza sam Webpack.

Wspiera on kilka rodzajów implementacji modułów. Mianowicie z tych najważniejszych są to

CommonJS

var MyModule = require('./MyModule');

// export at module root
module.exports = function() { ... };

// alternatively, export individual functions
exports.hello = function() {...};

ES6

import MyModule from './MyModule.js';

// export at module root
export default function () { ... };

// or export as module function,
// you can have multiple of these per module
export function hello() {...};

Co ciekawe, biblioteka ta radzi sobie również z plikami CSS i wspiera @import. Podchodzi również w inteligentny sposób do kompilacji modułów. 

Przykładowo jeśli nasz plik CSS jest dość krótki zostanie on dodany do pliku HTML jako inline CSS. Natomiast jeśli jest dość duży zostanie zminifikowany, dodany do głównego pliku CSS i załączony do pliku HTML.

Pluginy i loadery

W tekście pojawiły się te dwa magiczne słowa. Są one bardzo ważne dla procesu kompilacji przy użyciu Webpacka. Tłumacząc skrótowo można je opisać jako kawałki kodu, wstrzykiwane podczas procesu kompilacji w celu wykonania konkretnych działań. 

Przykładowo aby dodać obsługę ES6 dodajemy loader babelJs.

Jeśli chcemy kompilować pliki SASS dodajemy loader SASSa.

I tak dalej. Każdy loader dodaje nam konkretną funkcjonalność w procesie kompilacji

Podsumowanie

Webpack to na prawdę ciekawe narzędzie. Pojedyncza biblioteka dostarcza wszystko to co dotychczas robiło kilkadziesiąt niezależnych bibliotek i pluginów. 

A w następnym poście postaram się skupić na samym użyciu Webpacka w projekcie (nie koniecznie Ionic'owym).