close

Webpack Vodič za početnike

Webpack vrlo je koristan alat u modernom web razvoju, pomaže u upravljanju resursima i optimizaciji za projekte. Evo osnovnog vodiča za novopridošlice o tome kako koristiti Webpack:

Instalirati Webpack

Prvo instalirajte Node.js ako već niste. Zatim stvorite direktorij za svoj projekt i otvorite prozor terminala/naredbenog retka u tom direktoriju. Pokrenite sljedeće naredbe za instalaciju Webpack i webpack-cli(Webpack-ovo sučelje naredbenog retka):

npm install webpack webpack-cli --save-dev

Stvori Webpack konfiguraciju

Stvorite datoteku s nazivom webpack.config.js u korijenu direktorija vašeg projekta. Ovdje ćete konfigurirati 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  
  }  
};

Stvorite mape i datoteke

Napravite src mapu u korijenskom direktoriju i unutar nje kreirajte datoteku pod nazivom index.js da služi kao glavna datoteka za vašu aplikaciju.

Trčanje Webpack

Otvorite Terminal i pokrenite sljedeću naredbu da kompajlirate svoj izvorni kod koristeći Webpack:

npx webpack

Nakon pokretanja ove naredbe, Webpack slijedit će konfiguraciju, kompajlirati index.js datoteku i stvoriti izlaznu datoteku s imenom bundle.js u dist direktoriju.

Koristite u HTML-u

Napravite HTML datoteku u dist imeniku ili željenoj lokaciji i povežite se na bundle.js datoteku:

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

Pokrenite aplikaciju

Otvorite HTML datoteku u svom pregledniku i provjerite radi li vaša aplikacija.

Ovo je samo osnovni vodič. Webpack ima mnogo moćnih značajki kao što je rukovanje CSS-om, upravljanje modulima, korištenje učitavača i dodataka, optimizacija izvornog koda i još mnogo toga. Istražite službenu Webpack dokumentaciju kako biste u potpunosti iskoristili mogućnosti ovog alata.