Výstup

Pomocí vlastnosti output můžeme nastavovat, jak bude Webpack psát výsledné soubory na disk. Vlastnosti output předáváme objekt, kde nastavujeme různé věci týkající se výstupu.

Na této stránce najdete jen nejčastěji používaná nastavení. Všechna nastavení najdete v dokumentaci.

Cesta ke složce

Složku, kam Webpack umístí výsledné soubory, můžeme nastavit pomocí možnosti path, kde předáme absolutní cestu ke složce.

const path = require("path");

module.exports = {
    /* ... */
    output: {
        path: path.resolve(__dirname, "dist")
    }
}

Automatické vyčistění složky

Pokud chceme před každém umístěním výsledných souborů promazat složku, tak můžeme nastavit možnost clean na true.

const path = require("path");

module.exports = {
    /* ... */
    output: {
        path: path.resolve(__dirname, "dist"),
        clean: true
    }
}

Název výsledných souborů

Pokud chceme nastavit název výsledných souborů, tak to můžeme udělat pomocí možnosti filename. Pokud máme jen jeden vstupní soubor, můžeme této možnosti předat obyčejný řetězec představující název výsledného souboru, jak ukazuje následující ukázka.

module.exports = {
    /* ... */
    output: {
        filename: "bundle.js"
    }
}

Pokud máme více výsledných souborů, tak od sebe musíme názvy výsledných souborů nějakým způsobem odlišit. To můžeme například udělat tak, že do názvu zahrneme název souboru, jak ukazuje následující ukázka.

module.exports = {
    /* ... */
    output: {
        filename: "[name]-bundle.js"
    }
}

Ještě se hodí zmínit, že můžeme do názvu souboru umístit hash, který se vytvoří podle obsahu souboru. Hodí se to pro produkci, abychom zabránili tomu, že uživatel bude mít v prohlížeči zacachovanou starou verzi souboru i když na serveru je k dispozici nová. Jak to nastavit ukazuje následující ukázka:

module.exports = {
    /* ... */
    output: {
        filename: "[name].[contenthash].js"
    }
}
// název výsledného souboru bude například index.4d9993a9b28396ceee7c.js