Webpack je velmi užitečný nástroj v moderním vývoji webových aplikací, který pomáhá při správě zdrojů a optimalizaci projektů. Zde je základní průvodce pro nováčky, jak používat Webpack:
Nainstalujte Webpack
Nejprve nainstalujte Node.js, pokud jste to ještě neudělali. Poté vytvořte adresář pro svůj projekt a v tomto adresáři otevřete okno Terminál/Příkazový řádek. Spusťte následující příkazy pro instalaci Webpack a webpack-cli(rozhraní příkazového řádku Webpacku):
npm install webpack webpack-cli --save-dev
Vytvořit Webpack konfiguraci
Vytvořte soubor s názvem webpack.config.js v kořenovém adresáři vašeho projektového adresáře. Zde budete konfigurovat Webpack.
const path = require('path');
module.exports = {
entry: './src/index.js', // Entry point of your application
output: {
filename: 'bundle.js', // Output file name
path: path.resolve(__dirname, 'dist') // Output directory
}
};
Vytvářejte složky a soubory
V kořenovém adresáři vytvořte src složku a v ní vytvořte soubor s názvem, index.js který bude sloužit jako hlavní soubor vaší aplikace.
Běh Webpack
Otevřete Terminal a spusťte následující příkaz pro kompilaci zdrojového kódu pomocí Webpack:
npx webpack
Po spuštění tohoto příkazu Webpack bude následovat konfigurace, zkompiluje soubor index.js a vytvoří výstupní soubor s názvem bundle.js v dist adresáři.
Použití v HTML
Vytvořte soubor HTML v dist adresáři nebo v preferovaném umístění a vytvořte odkaz na bundle.js soubor:
<!DOCTYPE html>
<html>
<head>
<title>Webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
Spusťte aplikaci
Otevřete soubor HTML ve svém prohlížeči a zkontrolujte, zda vaše aplikace funguje.
Toto je pouze základní průvodce. Webpack má mnoho výkonných funkcí, jako je manipulace s CSS, správa modulů, používání zavaděčů a pluginů, optimalizace zdrojového kódu a mnoho dalšího. Prozkoumejte oficiální Webpack dokumentaci a plně využijte možnosti tohoto nástroje.