И как ты тоже можешь

Отказ от ответственности: это не учебник по веб-пакету; их там много.

Без сомнения, использование webpack и понимание того, что он делает, на самом деле сделали меня лучшим разработчиком. Но обо всем по порядку - что такое webpack?

Из репозитория Webpack на GitHub:

«webpack - это сборщик модулей. Его основная цель - объединять файлы JavaScript для использования в браузере, но при этом он также может преобразовывать, объединять или упаковывать практически любой ресурс или актив ».

Короче говоря: это волшебство.

Еще год назад я боялся webpack. Работая с React.js, я был удовлетворен тем, что просто знал, как кодировать и создавать компоненты, не более того, и оставил настройку и тяжелую работу профессионалам в моей команде.
Это всегда казалось скучной и сложной задачей .

Тем не менее, я всегда думал, что понимание этого мистического существа было какой-то недостижимой мечтой, которую я однажды найду в силах достичь, то, с чем могут справиться только самые храбрые, самые опытные разработчики.

Я был в восторге, когда в Facebook появилось приложение create-react-app, потому что это означало, что, двигаясь вперед, мне не нужно было бы знать, как связать свое приложение, и я мог бы работать без чувства вины. По крайней мере, мне так сказали:

Вот как мне удавалось прожить большую часть своих лет в качестве фронтенд-разработчика, создавая потрясающие приложения на React без использования этого жуткого инструмента.

Вы можете быть отличным фронтенд-разработчиком, не зная всего процесса от кодирования до сборки и развертывания, но действительно ли вы этого хотите? (Внимание, спойлер - нет.)

Запуск

По прошествии нескольких месяцев я устроился на новую работу в новую компанию и был единственным в команде, кто знал фронтенд, что сделало меня лидером фронтенда. В конце концов, это означало, что я должен был активизировать свою игру. Сразиться с моим грозным заклятым врагом было подходящим первым шагом к достижению этой цели.

Я создал новое приложение React, только на этот раз я не позволил себе просто прибегнуть к нестандартному решению; Я создал новое приложение с нуля, шаг за шагом, пока в конце концов я не установил webpack и не начал процесс настройки.

Как младший интерфейсный разработчик, я совершенно не обращал внимания на некоторые важные концепции, которые мне нужно было знать и понимать, чтобы стать лучше. Я не только не знал, что они означают, я даже не знал формулировки.

Вплоть до этого момента я привык, что некоторая магия берет мой исходный код и превращает его во что-то (назовем это чем-то… пакетом!), Которое можно было бы обслуживать и развертывать, но я никогда не переставал думать о том, что происходило под капот.

Моим первым шагом было начать читать руководство начало работы (ну да).

Этот, казалось бы, простой шаг натолкнул меня на некоторые из этих концепций, которые в то время казались супер продвинутыми. Мне нужно было просмотреть их, чтобы понять webpack и поток кода от кода к пакету, и поэтому я продолжил читать о таких терминах, как объединение и транспиляция.

Объединение - это когда webpack (или любой другой аналогичный инструмент) обрабатывает ваше приложение и строит граф зависимостей, который затем отображает каждый модуль, необходимый вашему проекту, и генерирует один или несколько пакетов.

Транспиляция - это процесс чтения исходного кода, написанного на одном языке программирования, и создания эквивалентного кода на другом языке.

Например, webpack может использовать плагины, такие как компилятор JavaScript Babel, чтобы взять код JavaScript ES6 и преобразовать его в простой старый JavaScript JavaScript, понятный любому браузеру.

Начав видеть более широкую картину и завершив раздел начало работы, я перешел к экспериментам.

Я начал с конфигурации по умолчанию, добавляя и удаляя атрибуты по мере того, как я продолжал, наблюдая, как это повлияло на пакет (или, точнее, какие ошибки были вызваны из-за нарушения конфигурации).

В конце концов, я в значительной степени понял, как настроить webpack для своих нужд, что раньше казалось невозможным.

Другой отличный способ узнать о веб-пакете и о том, что вы можете с ним делать, - это просматривать различные плагины веб-пакета или изменять и переопределять готовую конфигурацию веб-пакета по умолчанию, используемую приложением create-react-app, с помощью команды react -app-rewired модуль.

Замечательный проект, такой как create-react-app, имеет потрясающую конфигурацию веб-пакетов, которая отвечает за большую часть магии, происходящей за кулисами.

Мой опыт работы с webpack

Мой опыт работы с webpack был первым, когда я преодолел свой «страх перед неизвестным» и вышел из зоны комфорта. Выплата была огромной, что привело к огромному повышению уровня, которое все еще продолжается.

Начиная с базовых концепций, таких как комплектация и транспиляция, я был в ударе и знал, что только царапаю верхушку айсберга. Обретя вновь обретенную уверенность, я получил стимул больше узнавать о мире фронтенда, что со временем заставило меня еще больше полюбить его.

Выйдя из зоны комфорта, я стал лучше, что, в свою очередь, помогло мне обрести больше уверенности, пока я не почувствовал себя достаточно комфортно, чтобы проводить презентации перед моей командой и гильдией фронтендов моей компании.

Итак, если уменьшить масштаб, то первоначальное, незначительное, неудобное столкновение с webpack на самом деле поставило меня на путь становления лучше и увереннее в разработке, которому абсолютно нравится то, что он делает.

Мой главный вывод:

Всегда проявляйте любопытство к механике и особенностям инструментов и технологий, которые вы используете, что вы (вероятно) считаете само собой разумеющимся.

Не довольствуйтесь тем, что понимаете что-то только до такой степени, чтобы это работало.

Копайте глубже, потому что вы можете случайно получить от этого удовольствие.