Webpack-ის მუშაობის პრინციპი

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

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

თუმცა, კოდზე მუშაობა ერთ საერთო ფაილშიც არ არის ძალიან მოსახერხებელი. ამიტომ ამჟამად გამოიყენება შემდეგი მიდგომა: კოდი იწერება ცალკეულ ფაილებში, შემდეგ კი აწყობის საშუალებით იკრიბება ერთ საერთო ფაილში, რომელიც დაიკავშირება HTML ფაილს.

ცალკეული ფაილები წარმოადგენენ ES მოდულებს. ეს მოდულები სხვა ფაილებთან დაკავშირებულია import ბრძანების მეშვეობით.

ჩვეულებრივ, იქმნება გარკვეული ძირითადი ფაილი, რომელსაც უკავშირდება დანარჩენი ფაილები. ამ ფაილს ეწოდება შესასვლელი წერტილი.

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

როგორც წესი, კოდი, რომელსაც პროგრამისტი წერს, მდებარეობს საქაღალდეში src, ხოლო აწყობილი კოდი მოთავსებულია საქაღალდეში dist.