Vstupní soubory

Webpack náš kód začíná zpracovávat s nějakého vstupního souboru, popřípadě i více vstupních souborů. Definujeme je pomocí vlastnosti entry.

Jeden vstupní soubor

Pokud máme jen jeden vstupní soubor, tak k němu můžeme vlastnosti entry předat cestu jako řetězec.

module.exports = {
    entry: "./src/index.js"
}

Předchozí kód je zkratkou pro tuto syntaxy:

module.exports = {
    entry: {
        main: "./src/index.js"
    }
}

Pokud máme více samostatných souborů a chtěli bychom je sjednodit do jednoho, tak můžeme vlastnosti entry předat pole cest k těmto souborům.

module.exports = {
    entry: ["./src/1.js", "./src/2.js"]
}

Více vstupních souborů

Pokud chceme definovat více vstupních souborů, tak musíme použít objektovou syntaxy. Následující konfigurace vygeneruje soubor main.js a app.js.

module.exports = {
    entry: {
        main: "./main.js",
        app: "./src/application.js"
    }
}

Nastavení vstupních souborů

Při definování vstupních souborů jim můžeme nastavit pár možností. Pokud je chceme nastavit, tak musíme vstupní soubor specifikovat následujícím způsobem:

module.exports = {
    entry: {
        main: {
            import: "./src/index.js", // cesta ke vstupnímu souboru
            filename: "app.js" // výsledný soubor bude mít název app.js
        }
    }
}

U vstupních souborů můžeme nastavit tyto možnosti:

• dependOn - Vstupní soubory, na kterých vstupní soubor závisí. Musejí být načteny před tímto vstupním souborem.
• filename - Název výsledného souboru.
• import - Cesta k vstupnímu souboru/souborům.
• library - Tuto možnost můžeme použít, pokud děláme nějakou knihovnu. Více zde.
• runtime - Nevím k čemu toto nastavení slouží. Více v dokumentaci.
• publicPath - Nevím k čemu toto nastavení slouží. Více v dokumentaci.

U nastavení filename 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á. Následující ukázka ukazuje jak to nastavit:

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