Loadery

V základu Webpack rozumí pouze JavaScriptu a JSON souborům. Podporu pro zpracování jiných typů souborů si můžeme přidat prostřednictvím loaderů.

Konfigurace loaderů

Loadery v konfiguračním objektu nastavujeme v části module v poli rules. V tomto poli pro různé typy souborů specifikujeme objekt a určujeme, které loadery se použijí. Tento objekt má vždy vlastnost test a use. Do vlastnosti test předáváme regex pro otestování názvu souboru (většinou jeho koncovky). Pokud test projde, tak se použijí loadery, které specifikujeme ve vlastnosti use.

Pokud chceme pro jeden typ souborů použít jen jeden loader, tak můžeme do vlastnosti use předat název loaderu pomocí řetězce (někdy i jinak, pokud například plugin poskytuje loader). Pokud chceme použít více loaderů, tak do vlastnosti use předáme pole loaderů. Loadery se postupně použijí od konce po začátek pole. V následující ukázce se tedy pro soubory s koncovkou .less spustí nejdříve less-loader, poté css-loader a nakonec style-loader.

module.exports = {
    /* ... */
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader"
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            }
        ]
    }
}

Pokud chceme některý loader nějak nastavit, tak můžeme namísto názvu loaderu předat objekt s vlastnostmi loader a options. Vlastnosti loader předáme název loaderu a vlastnosti options předáme objekt, kde můžeme loader nakonfigurovat.

module.exports = {
    /* ... */
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            url: false
                        }
                    },
                    "less-loader"
                ]
            }
        ]
    }
}

Seznam loaderů

Zde jsem vytvořil seznam loaderů, které by se vám třeba mohli hodit. Určitě se ale nejedná o kompletní list. Kdokoliv si totiž může napsat svůj vlastní loader. Já jsem tu vypsal hlavně ty, které jsou zmíněné v dokumentaci. S naprostou většinou z nich v době tvorby tohoto webu nemám ani žádné zkušenosti. U většiny z nich je budete muset pravděpodobně zkombinovat i s jiným loadery abyste dosáhli požadovaného výsledku. To si již vygooglíte nebo vyhledáte v dokumentaci. Ale myslím že tento seznam stejně moc používat nebudete a většinou si spíš přímo vygooglíte jak něco nakonfigurovat.

Šablonování

• html-loader - Slouží k exportování HTML souboru jako řetězce.
• pug-loader - Načte Pug a Jade šablony a vrátí funkci.
• markdown-loader - Kompiluje Markdown do HTML.
• posthtml-loader - Načte HTML a použije na něj PostHTML.
• handlebars-loader - Kompiluje Handlebars do HTML.
• twig-loader - Zkompiluje Twig šablony a vrátí funkci.
• a další...

Stylování

• style-loader - Bere CSS z JavaScriptu a aplikuje jej na stránku.
• css-loader - Bere CSS a kompiluje jej do JavaScriptu.
• less-loader - Načte a zkompiluje LESS soubor.
• sass-loader - Načte a zkompiluje SASS/SCSS soubory.
• postcss-loader - Načte CSS a použije na něj PostCSS.
• stylus-loader - Načte a zkompiluje Stylus soubory.
• a další...

Transpilace

• babel-loader - Načte ES6+ kód a transpiluje jej do zpětně kompatibilní verze JavaScriptu za použití Babel.
• buble-loader - Načte ES6+ kód a transpiluje jej do zpětně kompatibilní verze JavaScriptu za použití Bublé.
• traceur-loader - Načte ES6+ kód a transpiluje jej do zpětně kompatibilní verze JavaScriptu za použití Traceur.
• ts-loader - Načte TypeScript 2.0+ jako JavaScript.
• coffee-loader - Načte CoffeeScript jako JavaScript.
• fengari-loader - Načte Lua kód za použití fengari.
• elm-webpack-loader - Načte Elm jako JavaScript.
• a další...