Webpack lusknutím prstu - Laravel Mix

Tento článek patří do seriálu Zrychlení webu a dev stack. Ostatní články seriálu:

1. Cachujeme, GZipujeme, zrychlujeme
2. SVG a PNG Sprite, zrychlujeme podruhé
3. Minifikace - zrychlujeme po třetí
4. DataURI - zrychlujeme po čtvrté
5. Webpack lusknutím prstu - Laravel Mix - Alternativa ke Gruntu a Gulpu
6. Fiddler - web debugger
7. Nastavení GZip komprese u souborů s fonty
8. Automatizace s Gruntem - Automatizace ostatních technik ze seriálu
9. Systém SVG ikon s Gulpem

---

Laravel Mix nemusí být nutně použit s webem v Laravelu. Osobně jsem jej použil i pro stránky tvořené ve WordPressu.

V roce 2012 vznikl Grunt o rok a půl později Gulp. Obojí jsou JS task runnery, tedy nástroje, které spouští definované úlohy. Používaly se k překladu, minifikaci a optimalizaci použitý zdrojů jako jsou CSS, JS, obrázky, fonty apod. A Martin je namísto Webpacku stále doporučuje, viz citace níže.

Webpack vznikl dokonce ještě před Gulpem, není to ale task runner, nýbrž bundler. Analyzuje veškerý kód, zpracovává závislosti a poté vytváří 1 výstupní JS soubor, ve kterém je naprosto vše. Pomocí loaderů je možné tyto soubory zase rozdělit. A díky zmíněným závislostem mezi soubory dokáže dělat mnohem lepší optimalizace. Proto jej někteří používají namísto Gruntu či Gulpu.

Vyřešit se to ve Webpacku dá. [...] Jenže i tak to často bude jako se drbat levou nohou za pravým uchem. Pro zpracování čehokoliv mimo JavaScript jsou prostě lepší tradiční spouštěče jako Grunt, Gulp, NPM skripty nebo třeba Make.
Zdroj: Martin Michálek, https://www.vzhurudolu.cz/prirucka/webpack

Jednořádkové konfigurace a mnoho dalšího

Pro mě, jakožto backendového vývojáře, který nesleduje nejnovější FE trendy je potřeba něco, co rychle nastavím a bude to fungovat. Laravel Mix je přesně to, co potřebuji. Kompilace Sass, JS, BrowserSync, verzování i pluginy a Sass Lint. Následující ukázka kódu je ze souboru webpack.mix.js, který používám jako pro tento blog. Pro vysvětlení jsem přidal pár komentářů.

const mix = require('laravel-mix'); // Nutné pro každý Laravel Mix
const StyleLintPlugin = require('stylelint-webpack-plugin'); // Import StyleLint pluginu

mix.sourceMaps()
    .version() // Generuje soubor pro automatické verzování v prohlížeči, viz níže
    .options({
        processCssUrls: false, // Nezpracovávat URL v CSS souborech
        postCss: [ // Přidání vlastních PostCSS pluginů
            require('postcss-pxtorem'),
            require('postcss-flexbugs-fixes'),
            require('postcss-assets')({
              loadPaths: ['public/img/']
            })
        ],
    }).webpackConfig({
        devtool: 'source-map',
        // Použití Babel loaderu pro JS soubory pro zpětnou kompatibilitu s ES6
        module: {
            rules: [{
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader',
                    options: mix.config.babel()
                }]
            }]
        }

    });

mix.copy('node_modules/lightgallery.js/src/fonts/', 'public/fonts/');

// Rozšíření vlastní styleLint() funkce do mixu
mix.extend('styleLint', (config) => {
    config.plugins.push(new StyleLintPlugin({
        files: 'resources/sass/**/*.s?(a|c)ss'
    }));
});

// Kompilace jednotlivých CSS a JS souborů
mix.sass('resources/sass/styles.scss', 'public/css', {sourceMap: true});
mix.sass('resources/sass/wysiwyg.scss', 'public/css', {sourceMap: true});
mix.sass('resources/sass/voyager.scss', 'public/css');
mix.js('resources/js/scripts.js', 'public/js');
mix.js('resources/js/sparks.js', 'public/js');
mix.js('resources/js/voyager.js', 'public/js');
mix.styleLint(); // Zavolání dříve registrované vlastní funkce pro StyleLint

Laravel Mix obsahuje také Autoprefixer, je ale nutné vytvořit .browserslistrc soubor, ve kterém budou jednotlivé podmínky specifikovány na jednotlivých řádcích.

# Browsers we support via Babel, Autoprefixer etc. https://github.com/ai/browserslist
>1%
last 2 versions
Firefox ESR
ie >= 10

Verzování

Pomocí funkce .version() v Mixu je vygenerován soubor mix-manifest.json, který obsahuje URL adresu k souboru včetně GET parametru s verzí. Pokud se do HTML vypíše URL včetně GET parametru, bude automaticky prohlížeč stahovat soubor znovu, protože se změní i verze.

{
    "/js/scripts.js": "/js/scripts.js?id=9450bc6ab62df6d50d7b",
    "/css/styles.css": "/css/styles.css?id=127efa32ee759e606ce9",
    "/css/wysiwyg.css": "/css/wysiwyg.css?id=39c370aa752a2d70d9f6",
    "/js/sparks.js": "/js/sparks.js?id=cf53dbf5fb66fab9a99c",
    "/js/voyager.js": "/js/voyager.js?id=59ab870b72868d41d54a",
}

---

Máte zkušenosti s Webpackem či Laravel Mixem? Zkušenosti můžete sdílet v komentářích.