close

Webpack Udhëzues për fillestarët

Webpack është një mjet shumë i dobishëm në zhvillimin modern të uebit, duke ndihmuar në menaxhimin e burimeve dhe optimizimin e projekteve. Këtu është një udhëzues bazë për të ardhurit se si ta përdorin Webpack:

Instaloni Webpack

Së pari, instaloni Node.js nëse nuk e keni bërë tashmë. Pastaj, krijoni një direktori për projektin tuaj dhe hapni një dritare Terminali/Command Prompt në atë direktori. Ekzekutoni komandat e mëposhtme për të instaluar Webpack dhe webpack-cli(ndërfaqja e linjës së komandës së Webpack):

npm install webpack webpack-cli --save-dev

Krijo Webpack konfigurim

Krijoni një skedar të emërtuar webpack.config.js në rrënjën e drejtorisë së projektit tuaj. Këtu do të konfiguroni 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  
  }  
};

Krijoni dosje dhe skedarë

Krijoni një src dosje në direktorinë rrënjë dhe brenda saj krijoni një skedar të emërtuar index.js që të shërbejë si skedari kryesor për aplikacionin tuaj.

Vraponi Webpack

Hapni një Terminal dhe ekzekutoni komandën e mëposhtme për të përpiluar kodin tuaj burimor duke përdorur Webpack:

npx webpack

Pas ekzekutimit të kësaj komande, Webpack do të ndjekë konfigurimin, do të përpilojë index.js skedarin dhe do të krijojë një skedar dalës të emërtuar bundle.js në dist drejtori.

Përdorni në HTML

Krijoni një skedar HTML në dist drejtori ose vendndodhjen tuaj të preferuar dhe lidheni me bundle.js skedarin:

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

Ekzekutoni Aplikacionin

Hapni skedarin HTML në shfletuesin tuaj dhe kontrolloni nëse aplikacioni juaj po funksionon.

Ky është vetëm një udhëzues bazë. Webpack ka shumë veçori të fuqishme si trajtimi i CSS, menaxhimi i moduleve, përdorimi i ngarkuesve dhe shtojcave, optimizimi i kodit burimor dhe shumë më tepër. Eksploroni dokumentacionin zyrtar Webpack për të shfrytëzuar plotësisht aftësitë e këtij mjeti.