Webpack #2 - praktyczne przykłady

Znając zarys ogólnych funkcjonalności Webpacka postaram się pokazać kilka przykładów jego zastosowania.

Nowy projekt

Rozpoczniemy od utworzenia katalogu w odpowiadającym nam miejscu

mkdir webpack-test

Inicjalizujemy manadżera pakietów

cd webpack-test
npm init

i przechodzimy przez wszystkie instrukcje, które zostaną wyświetlone.
Teraz jesteśmy gotowi aby pobrać bibliotekę:

npm install webpack --save-dev

W ten sposób zostanie ona pobrana, a jej definicja dodana od razu do pliku packages.json jako zależność deweloperska.

Tworzymy potrzebne pliki

mkdir lib www
touch webpack.config.js
touch lib/index.js

uruchamiamy edytor

atom ./

i wypełniamy plik ./webpack.config.js następującą treścią

var webpack = require('webpack'),
    path = require('path');

module.exports = {
    debug: true,
    entry: {
        main: './lib/index.js'
    },
    output: {
        path: path.join(__dirname, 'www'),
        filename: '[name].js'
    },
    module: {
        loaders: []
    }
};

Tak skonfigurowany projekt za plik wejściowy kompilacji postrzega ./lib/index.js, a jej wynik trafi do katalogu ./www
Kompilację przeprowadzamy przy użyciu następujących komend.
Debug mode:

webpack

Production mode (pliki zostaną zminifikowane)

webpack -p

Testy

Przetestujmy działanie za pomocą modułu-nakładki na akcje konsolowe.
W katalogu lib tworzymy plik consoleAdapter.js o następującej treści:

module.exports = {
  log: function(value)
  {
    console.log(value);
  }
};

Następnie plik index.js wypełniamy taką treścią

var consoleAdapter = require('./consoleAdapter.js');
consoleAdapter.log('Hello world!');

Uruchamiamy kompilację i sprawdzamy czy wszystko działa:

webpack
node ./www/main

W konsoli powinno ukazać się Hello world!

Użycie loaderów

ECMAScript 6

Instalujemy odpowiedni loader

npm install babel-loader --save-dev

Dodajemy go do konfiguracji webpacka

loaders: [{

   test: /\.es6.js$/,
   loader: "babel-loader"
   }
]

i zmieniamy rozszerzenie pliku console.js na .es6, a samą jego treść na następującą:

module.exports = {
  log: (value) => console.log(value)
};

kolejna kompilacja powinna przejść bez problemów, a rezultat zadziałać w ten sam sposób.

CSS i SASS

Do kompilacji plików CSS i SASS przydatne będą następujące loadery.

• css-loader
• autoprefixer-loader - dzięki niemu nie martwimy się o dodawanie prefixów dla konkretnych przeglądarek
• sass-loader

loaders: [{
      test: /\.css$/,
      loader: "css-loader!autoprefixer-loader"
    }, {
      test: /\.scss$/,
      loader: "css-loader!sass-loader"
    } {
      test: /\.es6.js$/,
      loader: "babel-loader"
    }
]

HTML i obrazki

• html-loader
• file-loader

{
 test: /\.html$/,
 loader: "html-loader"
},{
 test: /\.(png|jpg|gif)$/,
 loader: "file-loader?name=img/img-[hash:6].[ext]"
},

Globalne moduły

Czasami potrzebujemy mieć dostęp do pewnych modułów w globalnej przestrzeni naszej aplikacji w tym celu używamy expose-loader.

W tym konkretnym przypadku zależy nam aby mieć globalny dostęp do lodash'a pod znakiem _.

{
  test: require.resolve("lodash"),
  loader: 'expose?_'
}

Podsumowanie

Jak widzimy kilkoma prostymi modułami i definicjami w pliku konfiguracyjnym jesteśmy w stanie wykonać na prawdę skomplikowane operacje. I nie potrzebujemy tutaj żadnego menadżera zadań. Jak najbardziej kompilację Webpacka można przy pomocy takiego uruchamiać.

Zachęcam do eksperymentowania z loaderami i testowania ich możliwości.