Webpack yra labai naudinga priemonė kuriant šiuolaikines žiniatinklio svetaines, padedanti valdyti išteklius ir optimizuoti projektus. Štai pagrindinis vadovas naujokams, kaip naudoti Webpack:
Diegti Webpack
Pirmiausia įdiekite Node.js, jei dar to nepadarėte. Tada sukurkite savo projekto katalogą ir tame kataloge atidarykite terminalo / komandų eilutės langą. Vykdykite šias komandas, kad įdiegtumėte Webpack ir webpack-cli(Webpack komandų eilutės sąsaja):
npm install webpack webpack-cli --save-dev
Sukurti Webpack konfigūraciją
Sukurkite failą, pavadintą webpack.config.js jūsų projekto katalogo šaknyje. Čia jūs sukonfigūruosite 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
}
};
Kurti aplankus ir failus
Sukurkite src aplanką šakniniame kataloge ir jame sukurkite failą, pavadintą index.js kaip pagrindinis jūsų programos failas.
Bėk Webpack
Atidarykite a Terminal ir paleiskite šią komandą, kad sukurtumėte šaltinio kodą naudodami Webpack:
npx webpack
Paleidę šią komandą, Webpack vykdys konfigūraciją, sukompiliuos index.js failą ir sukurs išvesties failą, pavadintą bundle.js kataloge dist.
Naudokite HTML
Sukurkite HTML failą kataloge dist arba pageidaujamoje vietoje ir susiekite su bundle.js failu:
<!DOCTYPE html>
<html>
<head>
<title>Webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
Paleiskite programą
Atidarykite HTML failą naršyklėje ir patikrinkite, ar programa veikia.
Tai tik pagrindinis vadovas. Webpack turi daug galingų funkcijų, tokių kaip CSS tvarkymas, modulių valdymas, kroviklių ir papildinių naudojimas, šaltinio kodo optimizavimas ir daug daugiau. Peržiūrėkite oficialią Webpack dokumentaciją, kad visiškai išnaudotumėte šio įrankio galimybes.