JavaScript-ში Webpack-ის აწყობის პრინციპი

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

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

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

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

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

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

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

აწყობა ასევე საშუალებას აძლევს რეგულირდეს აწყობის რეჟიმი. რეჟიმი 'development' განკუთვნილია დეველოპმენტის პროცესისთვის. ის აწყობს კოდს დეველოპმენტისთვის მოსახერხებელი τρόποტ. რეჟიმი 'production' განკუთვნილია საბოლოო კოდისთვის, რომელიც გამოუშვებული იქნება სამუშაოდ. ამ რეჟიმში კოდი იქნება მინიმიფიცირებული, რათა შემცირდეს მისი ზომა და გაიზარდოს ჩატვირთვის სიჩქარე.