Loaders

nadogradjuju standardne mogucnosti wabpack-a tako sto predprocesuju fajlove i vracaju staticne module

• CSS preprocessors
• ES6 Module Transpilers
• Pretvara assets u base64

Nesto kao browserify transforms

var _ = require('lodash');
// koristi url loader
require('url!./image.png');
// CSS se loaduje kao text i ubacuje u <head/>
// Vise loadera moze da se spoji
require('style!css!./styles.css');
// Ako js fajl e podrzava modularni stistem i dalje mozemo da ga koristimo
// zahtevamo ga i dodleimo mu lokalnu promenjivu 
require('imports?foo=lib!lib.js');

// onda nam je foo lokalna promenjiva
foo.say();

Vise od JavaScript-a

HTML/templates

require('style!css!less!./style.less')

LESS

var template = require("./template.hbs");
// => generise template handlebars funkciju

require("url?limit=10000!./image.png");
// prebacuje image.png u public dir
// vraca url ili DataUrl ako je "image.png" manja od 10kb

Images

Fajlovi / Fontovi

var fontUrl = require("file!./font.svg");
// => prebacice fajl u public dir
// => vratice putanju

// webpack.config.js
{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader ce biti koriscen za ".jade" fajlove
            { test: /\.css$/, loader: "style!css" },
            // => "style" i "css" loader ce biti koriscen za ".css" fajlove
            { test: /\.es6$/, loader: "es6" },
            // => "es6" loader ce biti koriscen za ".es6" fajlove
        ]
    }
}

ako stavimo u konfiguraciju ime loadera i fajl podrazumevani tip podatka nije nam potrebno da ga kucamo

Konfigurisanje loadera

// app.js
var Game = require('./Game'); // loadovace ./Game.es6 kao es6 modul

async loading

CommonJS je sihron ali webpack pruza mogucnosti ta asohrino definisemo zavisnosti. Naprimer to je korisno kad imamo naprimer klientski router i zelimo na svim stranicama ali zelimo da imamo i delove aplikacije koje zelimo da preuzmemo samo kad su nam potrebne.

// router.js
var page = require('page');
var app = require('app');
page('/blog', function() {
    app.showLoading();
    require('bundle!./views/blog')(function(Blog) {
        app.hideLoading();
        app.render(Blog);
    });
});


// views/blog.js
require('./less/blog.less');
var template = require('./templates/blog');
var request = require('superagent');

module.exports = Blog;

function Blog() {
    this.el = options.el;

    this.render();
};

Blog.prototype.render = function() {
    var self = this;
    request.get('/api/v1/blog', function(res) {
        var html = template(res.body);
        self.el.innerHTML = html;
    });
};