Webpack nástroje

Tato stránka obsahuje dva nástroje, které při používání Webpacku pravděpodobně použijete. Jedná se o webpack-merge a webpack-dev-server.

Sloučení konfiguračních souborů

Pokud chceme sloučit dva konfigurační soubory do jedné konfigurace, tak k tomu můžeme použít nástroj jménem webpack-merge. Můžeme si tak jednodušeji vytvořit konfigurační soubor pro vývoj a produkci. Nástroj webpack-merge můžeme nainstalovat jako jakýkoliv jiný NPM balíček.

npm install --save-dev webpack-merge

Balíček webpack-merge nám poskytuje funkci merge, které můžeme předat více konfiguračních objektů pro jejich sloučení dohromady.

const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.common");

module.exports = merge(commonConfig, {
    entry: "./index.js",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "dist"),
        clean: true
    }
});

Dev Server

Při vývoji nechceme naši aplikaci po každé změně manuálně sestavovat. Proto si můžeme nainstalovat Dev Server, který se o to postará za nás. Další výhoda je ta, že pokud provedeme změny v našem CSS nebo JavaScript kódu, tak se aplikace v prohlížeči automaticky aktualizuje bez toho, aniž bychom museli manuálně obnovovat stránku. Dev Server můžeme nainstalovat pomocí následujícího příkazu:

npm install --save-dev webpack-dev-server

Po instalaci si můžeme Dev Server nakonfigurovat prostřednictvím vlastnosti devServer. Nastavíme kterou složku chceme servírovat a na jakém portu. Více možností můžete najít v dokumentaci.

module.exports = {
    /* ... */
    devServer: {
        static: "./dist",
        port: 3000
    }
}

Aby se nám Dev Server spustil, tak musíme použít příkaz "webpack serve". Pokud navíc chceme aby se nám aplikace automaticky otevřela v prohlížeči, tak můžeme na konec napsat možnost "--open".

webpack serve --config webpack.dev.js --mode development --open