WEBPACK ilə müasir tətbiqetmələr necə yaradılır

Standart Webpack konfiqurasiyasına nə qədər çatırıq?

Keçən ay GDG Devfestdə müasir tətbiqetmələrimizdə veb paketlərin istifadəsinə yönəlmiş çıxış etmək imtiyazına sahib oldum. Slaydlara burada baxa bilərsiniz.

Hər gün böyük və sürətli komandalarda mühəndis və / və ya məsləhətçi kimi çalışıram və veb paket bu komandaların hamısında təkrarlanan amildir (tətbiqlərimizin əksəriyyəti üçün ReactJs istifadə edirik). Əvvəlcə danışığımın ön çərçivələr / ReactJS, Vue, Angular və s.Kimi kitabxanaları olan veb paketlərin istifadəsinə yönəlməsi lazım idi.

Təklifimi təqdim etməzdən əvvəl insanların Webpack haqqında nə düşündüklərini öyrənmək üçün bir mini anket keçirməyə qərar verdim. Məni təəccübləndirdi ki, bir çox insan veb paketə həqiqətdən uzaq olan "Yalnız çərçivələrlə istifadə olunur" deyə müraciət etdi. Hələ bəziləri bir veb paket qurmağın qorxunc olduğunu söylədilər. Bu, Vanilla JS ilə veb paketlərin istifadəsinə daha çox diqqət yetirməyimə və standart veb paket konfiqurasiyasına nə qədər çatdığımızı görməyimə səbəb oldu.

Ancaq əvvəlcə:

WEBPACK NƏDİR?

Şəxsən mən Webpack'i bir çox Javascript modulu alan və brauzerə göndərilə bilən bir Javascript moduluna birləşdirən bir vasitə kimi təyin edirəm.

Bilirəm ki, bu Webpack-in işini sadələşdirir, amma insanlar bunu başa düşürlər. Daha çox izah etmək üçün veb paket, bağımlılığı olan javascript modullarını axtaran (əsasən digər javascript sənədlərindən kod lazım olan javascript sənədləri) axtaran, onları sıxan və sonra javascript faylı və ya içərisində olan faylları yaradan bir paketdir. heç bir asılılıq yoxdur. Beləliklə, onlar asanlıqla brauzerə göndərilə bilər.

Veb paketinin tarixi

Veb paketin həll etməyə çalışdığı problemləri başa düşmək üçün veb paketin tarixçəsi haqqında bir şey bilməliyik. Bu bölməni qısaltmaq üçün yalnız iki əsas vasitə və bir konsepsiya qeyd etdim:

  • Google Veb Toolbar: Bu, Javanı Java-ya çevirən Google-dan bir çərçivədir (bilirəm, düzdür?). Veb paketindəki mənim ən çox sevdiyim xüsusiyyət kimi görünən bir xüsusiyyəti var, yəni "Kod Bölmə". (Kod parçalanmasını sonrakı məqalədə izah edəcəyəm.)
  • Modules_Webmake: Veb paketinin gəldiyi kitabxanadır. Əsasən brauzer üçün javascript sənədlərimizi NodeJS (fantastik) üçün hazırladığımız şəkildə təşkil etməyə imkan verən bir vasitədir.
  • IIFE: dərhal çağırılan funksiya ifadəsi deməkdir. Bu, əsasən yaradıldığı və ya çağrıldığı bir Javascript funksiyasıdır.

Fonksiyon ifadəsi dərhal çağırıldı

Bunu öz hissəsinə ayırdım, çünki daha da izah etməli oldum. Bu bir IIFE nümunəsidir:

Bu funksiyanı skript etiketimizə qoysaq, dərhal edərdi. Skript etiketi brauzerdən yüklənir. Bu, bir funksiyanı window.onload-a əlavə etməklə eynidir, lakin əlavə bir faydası var.

Javascript-də bağlanma üsuluna görə IIFE-də elan edilmiş bütün dəyişənlər bu funksiyaya daxil edilmişdir. Bu o deməkdir ki, kod bazamda ad məkanı çakışmaları ilə bağlı hər hansı bir problemim olmazdı, amma eyni zamanda IIFE tərəfindən təmin olunan funksionallığı əldə edə bilərdim.

Niyə Webpack?

Bu gün Webpack hansı problemlərlə üzləşir?

Birincisi, skript etiketi problemimiz var. Hər bir HTML səhifəsində çox dəqiq bir qaydada ən azı 30 skript etiketinin olduğu bir kod bazası üzərində çalışdım. Bəzilərinin bunun əsl problem olmadığını söyləyə biləcəyini bilirəm, ancaq brauzer hər yükləmə müddətini təsir edə biləcək hər bir sorğu etməlidir. Ssenari etiketlərini idarə etmək də çətin ola bilər və yalnız birini yenidən düzəltmək tətbiqi poza bilər (mən də sınadım ).

İkincisi, qlobal ad məkanının qarışıq ola biləcəyi ad məkanı problemi hələ də qalmaqdadır. Bilirəm ki, çox dəyişkən adlandırma məsələsində çox yaradıcı insanlarıq, amma daha böyük bir komandada olduğunuz zaman dəyişən adların sadəcə toqquşduğu vaxtlar olur. Və ya gələcəyinizi belə eyni adı yenidən düşünə bilərsiniz (bəli, belə olur).

İnkişaf etdiricilərinin dəyişkənlərini hər zaman öz funksiyaları daxilində buraxmağı vərdiş halına gətirən bəzi təşkilatları tanıyıram, amma həmişə buna etibar edə bilmərik (və ya etibar edə bilmərik). Sonda, yalnız narahatlıqları ayırmaq çətinləşir.

Üçüncüsü, veb paketin modules_webmake-dən gəldiyini xatırlayıram. Dosyalarımızı NodeJS-də olduğu kimi (CommonJS ilə) düzəltmək üçün Webpack istifadə edə bildiyimiz üçün tərəzi çox yaxşı tərtib edən modul kod yazmağın əlavə faydası var (sadəcə ön çərçivələrdən istifadə edən insanlardan soruşun).

Ümumi JS

CJS haqqında çox şey izah etməyəcəyəm, çünki məqalənin mahiyyəti bu deyil. Ancaq bunun NodeJS-də istifadə olunan bir JS modul sistem olduğunu söyləyə bilərsiniz.

Webpack ilə bu modulu və hətta brauzerdəki “daha ​​yaxşı” ES modul sistemini asanlıqla istifadə edə bilərik (Webpack bunu ağıllı şəkildə idarə edir). Bu, bizə bir JS sənədinin tək bir funksiyanı idarə edə biləcəyi həqiqətən modul və davamlı kod yazmağımıza kömək edir (Tək Məsuliyyət prinsipi).

ES modulları (ESM)

Bu, inanırıq ya da inanmırıq, indiki brauzerlər tərəfindən tətbiq olunan başqa bir modul sistemdir. Təəssüf ki, orada məhdudiyyətlər var. Bu modulu da problemsiz Webpack ilə istifadə edə bilərik (çünki Webpack hələ də onu sona çevirir), amma üzərində işlədiyim kod bazalarının çoxunun ESM ilə daha oxunaqlı olduğunu gördüm. Dərinləşdirmək istərdim, amma bu məqalənin məqsədi bu deyil. Daha yaxşı bir izahat üçün bu heyrətləndirici məqaləni məsləhət görərdim.

Webpack necə işləyir?

Daha əvvəl Webpack-in sehrli olduğunu söylədiyimi bilirəm, amma yalan danışdım. Mümkün qədər asanlaşdırmaq üçün:

  • Veb paketi bir .js faylı olan bir giriş nöqtəsinə yol alır və idxal təlimatlarını axtarır (bu ya ESM ya da CJS ola bilər).
  • Daha sonra idxal edilmiş faylda axtarış aparılır və əlavə idxal təlimatları axtarılır. Bir asılılıq diaqramı yaradılır.

Daha yaxşı bir izahat üçün şəkilə baxın:

JK

Orada iki sənədim var, index.js və helpers.js. Bu iki fayl fərqli funksiyaları yerinə yetirir, amma index.js sənədimdəki helpers.js içindəki funksiyanı idxal edirəm və istifadə edirəm. Varsayılan olaraq, Webpack giriş nöqtəsi ./src/index.js. Oradan belə bir asılılıq diaqramı qurmağa çalışır:

Necə başlamaq lazımdır

Veb paketlərin necə işlədiyini daha yaxşı başa düşmək üçün gəlin sadə bir TODO tətbiqi yaradaq. Yalnız əsas əlavə et və silmək funksiyasına malikdir və Webpack-in standart konfiqurasiyası ilə birlikdə verilir (yəni Webpack konfiqurasiya faylı yoxdur). Tətbiq belə görünür:

JK

İlk addım yeni bir layihə kataloqu yaratmaq və biri dist, digəri src adlı iki qovluq yaratmaqdır. Varsayılan olaraq, Webpack'in giriş nöqtəsi ./src/index.js və JS paketi ./dist/main.js olaraq çıxır. Bu səbəbdən iki qovluğu yaradırıq.

İndex.html faylını dist qovluğunda yarada bilərsiniz. Bu veb paket üçün lazım deyil, çünki sənəd layihə qovluğunun hər hansı bir yerində saxlanıla bilər və yalnız main.js sənədinə müraciət edə bilərsiniz. Sonda layihə quruluşunuz belə olmalıdır:

Src qovluğunda TO-DO tətbiqimizin funksiyalarını həyata keçirməyə başladığımız index.html faylını yaradırıq. Əvvəlcə index.html faylını məlumatlarla doldururuq. Bir TO-DO tətbiqi yaratmaq bu təlimatın bir hissəsi olmadığından, yalnız aşağıdakı kodu göstərəcəyəm:

Todo Tətbiqi </ title> </ head> <body> <div class = "container"> <p> <label for = "new-task"> element əlavə et </ label> <input id = "new-task" növü = "text"> <button id = "addTask"> Əlavə et </ button> </ p> <h3> Todo </ h3> <ul id = "task"> </ ul> </ div> <script src = "main.js"> </ script> </ body> </ html></pre><p>Gəl indi işləyək. İki funksiyanı öz sənədlərinə daxil edəcəyik (əlavə edin və silin) ​​və sonra index.js-ə daxil edin. Src qovluğumuzda addTask.js və deleteTask.js adlı iki fayl yaradacağıq. Layihə quruluşunuz indi belə olmalıdır:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569857964226.png" /><p>İndi ehtiyacımız olan məntiqi əlavə etməyə başlaya bilərik. Buna görə əvvəlcə deleteTask.js faylını tətbiq edək, çünki heç bir asılılığı yoxdur. Bunu deleteTask.js dosyanıza yapışdırın:</p><pre>const deleteTask = funksiya (lər) {console.log ("tapşırığı sil ...", e); // Ana siyahı elementini ul var listItem = e.target.parentNode-dan silin; var ul = listItem.parentNode;</pre><pre>ul.removeChild (listItem); };</pre><pre>default defaultTesk ixrac;</pre><p>Bu sənəddə yalnız deleteTask funksiyası yaradılır və sonra standart ixrac olaraq ixrac olunur.</p><p>İndi addTask funksiyasını həyata keçirə bilərik. AddTask.js faylına aşağıdakı kodu əlavə edin:</p><pre>DeleteTask-ı "./deleteTask" -dan idxal et;</pre><pre>const createNewTaskElement = function (taskString) {const listItem = document.createElement ("li"); const label = document.createElement ("etiket"); const deleteButton = document.createElement ("düymə");</pre><pre>deleteButton.innerText = "Sil"; deleteButton.className = "sil"; deleteButton.addEventListener ("kliklə", deleteTask);</pre><pre>label.innerText = taskString;</pre><pre>listItem.appendChild (etiket); listItem.appendChild (deleteButton);</pre><pre>return listItem; };</pre><pre>const addTask = funksiya (lər) {const taskList = document.getElementById ("tapşırıqlar"); const task = document.getElementById ("yeni tapşırıq"); əgər (task.value! == "") {const newTaskItem = createNewTaskElement (task.value); taskList.appendChild (newTaskItem); task.value = ""; }};</pre><pre>default addTask ixracı;</pre><p>Bununla əvvəlcə deleteTask.js faylını idxal edirik. İdxal zamanı heç bir uzantı göstərilmirsə, Veb paketi avtomatik olaraq bir .js faylı olduğunu qəbul edir. Sonra formada daxil edilmiş tapşırığı ehtiva edən siyahı maddəsini yaradan funksiyamız var. Unutmamalı olduğumuz tək şey, silmək funksiyasını silmək düyməsinin klik işləyicisinə qoşmağımızdır. Sonra həqiqi addTask funksiyasını yaradır və ixrac edirik.</p><p>Bundan sonra addTask funksiyamızı index.js-ə idxal etməliyik. Aşağıdakı kodu index.js faylınıza yapışdırın:</p><pre>'./addTask' adresindən addTask idxal etmək;</pre><pre>const addTaskButton = document.getElementById ("addTask"); addTaskButton.addEventListener ("vurun", addTask);</pre><p>Çox sadədir: biz addTask funksiyasını idxal edirik və addTaskButton üçün klik işləyicisinə əlavə edirik. Yuxarıdakı addımları təqib etsəniz, hazır olmalısınız.</p><p>Main.js sənədimizi əldə etmək üçün kod bazasından Webpack çalıştırmalıyıq. Bu addım üçün sisteminizdə NodeJS quraşdırıldığından əmin olun. Sonra Webpack və Webpack CLI-ni qlobal olaraq aşağıdakı əmrlə quraşdırırıq:</p><pre>npm install -g webpack webpack-cli VƏ sudo npm install -g webpack webpack-cli</pre><p>Quraşdırma başa çatdıqdan sonra aşağıdakı əmri işə salın:</p><pre>Veb paketi</pre><p>Bu, sənədimizi uğurla birləşdirəcək, lakin terminalda belə bir xəbərdarlıq görməliyik:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569857965682.png" /><p>Veb paket yalnız bir rejim təyin etməməyimizi xəbərdar edir. Onu olduğu kimi qoyub kodu işlədə bilərik, hər şey yaxşı işləməlidir. Xəbərdarlığı bəyənmirsinizsə, veb paketi necə idarə edə biləcəyinizə baxın:</p><pre>webpack --mode = inkişaf</pre><p>Və sən getmək üçün yaxşısan</p><h3>Bükün</h3><p>Yol boyu itkin düşmüsünüzsə, istinad üçün həmişə GitHub reposundan istifadə edə bilərsiniz (buna baxmayaraq CSS stilləri daxildir).</p><p>Ümid edirəm bu məqalə Webpack-in nəyi təklif etdiyini göstərə bildi (yalnız əsaslar, heç bir konfiqurasiya olmadan). Aşağıdakı məqalələrdə kod bölmə, tənbəl yükləmə və Webpack-in çoxsaylı tətbiqetmələrlə işləməsi üçün konfiqurasiya kimi xüsusiyyətlər üçün müxtəlif xüsusi konfiqurasiyaların necə qurulacağını göstərəcəyəm.</p><p>Bu məqaləni mümkün qədər sadə etmək üçün məqalədə pack.json faylı istifadə etməkdən çəkindim. Package.json faylının istifadəsi və Webpack-in lokal olaraq qurulması Webpack-in istifadəsi üçün ən genişlənən metoddur. Bunu Webpack istifadəsi ilə bağlı növbəti məqaləmdə izah edəcəyəm.</p><p>Önümüzdəki məqalələrdə naviqasiyanı asanlaşdırmaq üçün, Webpack üçün izahatlar və ya tətbiqetmələr haqqında bir şərh əlavə etsəniz çox faydalı olardı. </p><p>Xüsusilə Sean T. Larkin, İsrail Obiagba və Hassan Sani-yə məqalənin əvvəlcədən planlaşdırıldığından daha yaxşı olmasına dair fikirlərinə görə təşəkkür edirəm. Hamınız rok!</p></div><div class="neighbor-articles"><h4 class="ui header">Həmçinin bax</h4><a href="/question/how-to-connect-ipad-to-projector-wirelessly/" title="ipadı proyektora simsiz bağlamaq">ipadı proyektora simsiz bağlamaq</a><a href="/question/how-to-zoom-in-pycharm/" title="pycharmda necə böyütmək olar">pycharmda necə böyütmək olar</a><a href="/question/how-to-address-the-dalai-lama/" title="dalai lama necə müraciət etmək olar">dalai lama necə müraciət etmək olar</a><a href="/question/how-to-get-rid-of-paspalum/" title="paspalumdan necə qurtulmaq olar">paspalumdan necə qurtulmaq olar</a><a href="/question/how-to-cut-steel-rod/" title="polad çubuq necə kəsilir">polad çubuq necə kəsilir</a><a href="/question/how-to-iron-dry-clean-only-pants/" title="yalnız şalvarları quru şəkildə necə təmizləyin">yalnız şalvarları quru şəkildə necə təmizləyin</a><a href="/question/how-to-make-fallout-4-harder/" title="fallout 4-ü necə çətinləşdirmək olar">fallout 4-ü necə çətinləşdirmək olar</a><a href="/question/how-to-get-full-screen-on-tv-from-laptop-hdmi/" title="laptop hdmi-dən tv-də tam ekran əldə etmək">laptop hdmi-dən tv-də tam ekran əldə etmək</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Həmçinin bax</h4><a href="/article/guest-posting-101-how-to-be-read-by-the-masses-3d19a8/" title="Qonaq Mesajı 101 - Kütlə tərəfindən necə oxunur">Qonaq Mesajı 101 - Kütlə tərəfindən necə oxunur</a><a href="/article/how-to-write-a-high-quality-novel-in-one-draft-with-no-outline-9cb5cb/" title="Təsviri olmayan bir qaralamada yüksək keyfiyyətli bir roman necə yazılır">Təsviri olmayan bir qaralamada yüksək keyfiyyətli bir roman necə yazılır</a><a href="/article/how-to-know-what-to-write-about-including-my-secret-sauce-e6c6cb/" title="Nə yazacağımı necə bilmək olar (gizli sousum da daxil olmaqla)">Nə yazacağımı necə bilmək olar (gizli sousum da daxil olmaqla)</a><a href="/article/how-to-be-an-ethical-sugar-daddy-0e9910/" title="Etik bir şəkər atası olmaq necədir">Etik bir şəkər atası olmaq necədir</a><a href="/article/how-to-master-async-await-with-this-real-world-example-9932dc/" title="Bu real dünya nümunəsini istifadə edərək async / gözləmə qaydalarına necə yiyələnəcəyinizi izah edirəm">Bu real dünya nümunəsini istifadə edərək async / gözləmə qaydalarına necə yiyələnəcəyinizi izah edirəm</a><a href="/article/how-to-build-an-absolutely-creative-group-fd71f3/" title="Tamamilə yaradıcı bir qrup necə yaradılır">Tamamilə yaradıcı bir qrup necə yaradılır</a><a href="/article/navcoin-community-fund-how-to-vote-for-your-favorite-proposals-2c86fe/" title="NavCoin İcma Fondu: Sevdiyiniz Təkliflər üçün Səs vermə qaydası">NavCoin İcma Fondu: Sevdiyiniz Təkliflər üçün Səs vermə qaydası</a><a href="/article/the-biggest-career-mistake-you-can-make-and-how-to-avoid-it-a1a828/" title="Edə biləcəyiniz ən böyük karyera səhvidir (və bundan necə çəkinmək olar)">Edə biləcəyiniz ən böyük karyera səhvidir (və bundan necə çəkinmək olar)</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="is flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="sa flag"></i></a><a href="https://bn.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="in flag"></i></a><a href="https://ca.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="es flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="cn flag"></i></a><a href="https://hr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="hr flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>