Webpack hija għodda utli ħafna fl-iżvilupp tal-web modern, li tgħin fil-ġestjoni tar-riżorsi u l-ottimizzazzjoni għall-proġetti. Hawnhekk hawn gwida bażika għal dawk ġodda dwar kif tuża Webpack:
Installa Webpack
L-ewwelnett, installa Node.js jekk ma tkunx diġà. Imbagħad, oħloq direttorju għall-proġett tiegħek u iftaħ tieqa Terminal/Prompt tal-Kmand f'dak id-direttorju. Mexxi l-kmandi li ġejjin biex tinstalla Webpack u webpack-cli(l-interface tal-linja tal-kmand tal-Webpack):
npm install webpack webpack-cli --save-dev
Oħloq Webpack Konfigurazzjoni
Oħloq fajl imsemmi webpack.config.js fl-għerq tad-direttorju tal-proġett tiegħek. Dan huwa fejn inti ser tikkonfigura 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
}
};
Oħloq folders u fajls
Oħloq src folder fid-direttorju tal-għeruq, u fi ħdanu, oħloq fajl imsemmi index.js biex iservi bħala l-fajl ewlieni għall-applikazzjoni tiegħek.
Mexxi Webpack
Iftaħ a Terminal u ħaddem il-kmand li ġej biex tikkompila l-kodiċi tas-sors tiegħek billi tuża Webpack:
npx webpack
Wara li tmexxi dan il-kmand, Webpack se ssegwi l-konfigurazzjoni, tikkompila l index.js -fajl, u toħloq fajl tal-ħruġ imsemmi bundle.js fid- dist direttorju.
Uża fl-HTML
Oħloq fajl HTML fid- dist direttorju jew il-post preferut tiegħek u link għall- bundle.js fajl:
<!DOCTYPE html>
<html>
<head>
<title>Webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
Mexxi l-Applikazzjoni
Iftaħ il-fajl HTML fil-browser tiegħek u ċċekkja jekk l-applikazzjoni tiegħek hijiex taħdem.
Din hija biss gwida bażika. Webpack għandu ħafna karatteristiċi qawwija bħall-immaniġġjar tas-CSS, il-ġestjoni ta 'moduli, l-użu ta' loaders u plugins, ottimizzazzjoni tal-kodiċi tas-sors, u ħafna aktar. Esplora d-dokumentazzjoni uffiċjali Webpack biex tisfrutta bis-sħiħ il-kapaċitajiet ta 'din l-għodda.