close

Webpack სახელმძღვანელო დამწყებთათვის

Webpack არის უაღრესად სასარგებლო ინსტრუმენტი თანამედროვე ვებ განვითარებისთვის, რომელიც ეხმარება რესურსების მართვას და პროექტების ოპტიმიზაციას. აქ არის ძირითადი სახელმძღვანელო ახალბედებისთვის, თუ როგორ გამოიყენონ Webpack:

Დაინსტალირება Webpack

პირველ რიგში, დააინსტალირეთ Node.js, თუ ჯერ არ დაგიყენებიათ. შემდეგ შექმენით დირექტორია თქვენი პროექტისთვის და გახსენით Terminal/Command Prompt ფანჯარა ამ დირექტორიაში. გაუშვით შემდეგი ბრძანებები ინსტალაციისთვის Webpack და webpack-cli(Webpack-ის ბრძანების ხაზის ინტერფეისი):

npm install webpack webpack-cli --save-dev

Webpack კონფიგურაციის შექმნა

შექმენით ფაილი, სახელწოდებით webpack.config.js თქვენი პროექტის დირექტორიაში. ეს არის სადაც თქვენ კონფიგურაცია 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  
  }  
};

შექმენით საქაღალდეები და ფაილები

შექმენით src საქაღალდე root დირექტორიაში და მასში შექმენით ფაილი, რომელიც index.js იქნება თქვენი აპლიკაციის მთავარი ფაილი.

გაიქეცი Webpack

გახსენით a Terminal და გაუშვით შემდეგი ბრძანება თქვენი წყაროს კოდის შესაქმნელად Webpack:

npx webpack

ამ ბრძანების გაშვების შემდეგ, Webpack მიჰყვება კონფიგურაციას, შეადგენს index.js ფაილს და შექმნის გამომავალ ფაილს სახელწოდებით bundle.js დირექტორიაში dist.

გამოიყენეთ HTML-ში

შექმენით HTML ფაილი დირექტორიაში dist ან თქვენთვის სასურველ ადგილას და დააკავშირეთ ფაილი bundle.js:

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

გაუშვით აპლიკაცია

გახსენით HTML ფაილი თქვენს ბრაუზერში და შეამოწმეთ მუშაობს თუ არა თქვენი აპლიკაცია.

ეს მხოლოდ ძირითადი სახელმძღვანელოა. Webpack აქვს მრავალი ძლიერი ფუნქცია, როგორიცაა CSS დამუშავება, მოდულების მართვა, ჩამტვირთველების და დანამატების გამოყენება, კოდის ოპტიმიზაცია და მრავალი სხვა. გამოიკვლიეთ ოფიციალური Webpack დოკუმენტაცია, რომ სრულად გამოიყენოთ ამ ხელსაწყოს შესაძლებლობები.