Лютые доклады по webpack
Раньше JS файлы подключали к html файлу руками. Но со временем сайты/приложения становились сложнее, количество JS файлов росло, поэтому появились сборщики. Основная задача сборщика: 👮 собрать 👮из кучи JS файлов один, который выполняет все то же самое. Согласитесь, это лучше, чем ходить в сеть за 50-ю внешними <script ...>.
Для новичков рекомендую official guide:
Getting started with webpack
Таким образом вы сразу "потрогаете" и настроите свой первый маленький бандл.
Для тех, кто в теме - доклады/статьи
🔸 Глубокое погружение в webpack (Стас Курилов, JetBrains). В этом докладе хорошее объяснение архитектуры webpack.
Смотреть на youtube
🔥 Внутренее устройство бандла webpack (Алексей Иванов, Злые марсиане). Лютейший доклад про проблемки, которые определенно возникнут, если не настроить конфиг для webpack правильно. Вообще много интересной информации "около" основной темы.
Смотреть на youtube
Читать на habr
🔹 Вебпак, вид сквозь монокль (Антон Кастрицкий, Яндекс). Очень полезный доклад с упором на ускорение сборки бандла.
Смотреть на youtube
🔸 Собираем бандл мечты с помощью Webpack (Максим Соснов). Почти тоже самое, что и в предыдущем докладе, но есть различия, в частности более подробно про code splitting.
Смотреть на youtube
Читать на habr
🔹 Курс от Владилена Минина. Видосик на 3 часа, так что сразу на x1.25 + если интересно только про вебпак, можно начать с 17-й минуты. Есть полезные вещи, которых нет в предыдущих докладах: context, aliases, etc + курс ориентирован на code along (то есть вы тоже можете писать параллельно свой конфиг).
Смотреть на Youtube
#best_video
#best_article
#webpack_lectures_frontbase
Take it easy ✋
Раньше JS файлы подключали к html файлу руками. Но со временем сайты/приложения становились сложнее, количество JS файлов росло, поэтому появились сборщики. Основная задача сборщика: 👮 собрать 👮из кучи JS файлов один, который выполняет все то же самое. Согласитесь, это лучше, чем ходить в сеть за 50-ю внешними <script ...>.
Для новичков рекомендую official guide:
Getting started with webpack
Таким образом вы сразу "потрогаете" и настроите свой первый маленький бандл.
Для тех, кто в теме - доклады/статьи
🔸 Глубокое погружение в webpack (Стас Курилов, JetBrains). В этом докладе хорошее объяснение архитектуры webpack.
Смотреть на youtube
🔥 Внутренее устройство бандла webpack (Алексей Иванов, Злые марсиане). Лютейший доклад про проблемки, которые определенно возникнут, если не настроить конфиг для webpack правильно. Вообще много интересной информации "около" основной темы.
Смотреть на youtube
Читать на habr
🔹 Вебпак, вид сквозь монокль (Антон Кастрицкий, Яндекс). Очень полезный доклад с упором на ускорение сборки бандла.
Смотреть на youtube
🔸 Собираем бандл мечты с помощью Webpack (Максим Соснов). Почти тоже самое, что и в предыдущем докладе, но есть различия, в частности более подробно про code splitting.
Смотреть на youtube
Читать на habr
🔹 Курс от Владилена Минина. Видосик на 3 часа, так что сразу на x1.25 + если интересно только про вебпак, можно начать с 17-й минуты. Есть полезные вещи, которых нет в предыдущих докладах: context, aliases, etc + курс ориентирован на code along (то есть вы тоже можете писать параллельно свой конфиг).
Смотреть на Youtube
#best_video
#best_article
#webpack_lectures_frontbase
Take it easy ✋
Лютые доклады по webpack - часть 2
Первая часть материалов доступна вот по этому хэш тегу - #webpack_lectures_frontbase. А сейчас немного дискуссии + ссылок...
Я не сильно ратую за изучение webpack, но все же я вижу пользу в понимании того, как он работает. Почему ? Чтобы научиться настраивать проект from ZERO. Для этого вам придется изучить инфраструктуру современного front-end, что сильно апнет ваш уровень как разработчика. Инфраструктурой я называю библиотеки, тулзы и нативные вещи, вроде: babel + плагины, системы модулей, eslint, dotenv, переменные окружения, работа браузера, etc. После такого экспириенса вы станете смелее менять legacy вещи и улучшать проект, а это, согласитесь, звучит заманчиво🙂
Ссылки
🔥 Ronen Amiel - Build Your Own Webpack
Отличный доклад + лайфкодинг на тему как вообще работают сборщики. Можно сказать, что чел на коленке напишет игрушечный webpack, но в добавок даст хинты "почему именно так". Рекомендую!
🔸 Конфиг из create-react-app
Уверен, что примеров готовой настройки много, но одна из годных - от ребят из facebook, а именно, в репо давно замученного нами до дыр CRA 🙂
🔹 Webpack book на survivejs
Это бесплатная версия книги про webpack от Juho Vepsäläinen. Сразу скажу, что я лишь бегло просмотрел и понял, что она стоит изучения (думаю, что при необходимости можно и платную купить) 👌🏻
🔸 Как я стал лучше программировать
Да, это не совсем про webpack, но чтобы как-то дать противовес куче новых материалов, прочитайте параграф "не отвлекайтесь на мишуру", пусть он будет намордником для "собаки всезнайки"😉
#webpack_lectures_frontbase_2
Catch you later👨🏻💻
Первая часть материалов доступна вот по этому хэш тегу - #webpack_lectures_frontbase. А сейчас немного дискуссии + ссылок...
Я не сильно ратую за изучение webpack, но все же я вижу пользу в понимании того, как он работает. Почему ? Чтобы научиться настраивать проект from ZERO. Для этого вам придется изучить инфраструктуру современного front-end, что сильно апнет ваш уровень как разработчика. Инфраструктурой я называю библиотеки, тулзы и нативные вещи, вроде: babel + плагины, системы модулей, eslint, dotenv, переменные окружения, работа браузера, etc. После такого экспириенса вы станете смелее менять legacy вещи и улучшать проект, а это, согласитесь, звучит заманчиво🙂
Ссылки
🔥 Ronen Amiel - Build Your Own Webpack
Отличный доклад + лайфкодинг на тему как вообще работают сборщики. Можно сказать, что чел на коленке напишет игрушечный webpack, но в добавок даст хинты "почему именно так". Рекомендую!
🔸 Конфиг из create-react-app
Уверен, что примеров готовой настройки много, но одна из годных - от ребят из facebook, а именно, в репо давно замученного нами до дыр CRA 🙂
🔹 Webpack book на survivejs
Это бесплатная версия книги про webpack от Juho Vepsäläinen. Сразу скажу, что я лишь бегло просмотрел и понял, что она стоит изучения (думаю, что при необходимости можно и платную купить) 👌🏻
🔸 Как я стал лучше программировать
Да, это не совсем про webpack, но чтобы как-то дать противовес куче новых материалов, прочитайте параграф "не отвлекайтесь на мишуру", пусть он будет намордником для "собаки всезнайки"😉
#webpack_lectures_frontbase_2
Catch you later👨🏻💻
