Всех приветствую, с вами Сергей Никонов и в этом уроке я расскажу про Webpack.
Итак, что же такое Webpack?
Webpack - это инструмент для сборки современных frontend-приложений.
В настоящий момент, по популярности, Webpack опережает похожие инструменты, такие как Gulp и Grunt.
Логика работы очень простая, но для того, чтобы понять какие задачи решает Webpack, вам необходимо понимать из чего состоит современное веб-приложение.
Смотрите видео Что такое Webpack
Дело в том, что современное веб-приложение может состоять из достаточно большого количества файлов и может быть написано с помощью современного JavaScript и различных препроцессоров, например SASS и других.
Браузеры пока в полной мере не поддерживают эти технологии и по этой причине, для преобразования кода на современном JavaScript в JavaScript ES5 и перевода кода из SASS в css и многих других задач, используются дополнительные инструменты, такие как webpack.
Когда вы один раз настроите Webpack для вашего фронтенд приложения, вебпак будет автоматически выполнять все рутинные задачи, а вам останется только наслаждаться написанием вашего кода!
В конечном итоге, используя Webpack, вы будете получать две версии вашего проекта: Первая - это исходный код, который вы будете писать с помощью современного javascript и использовать другие удобные инструменты и вторая версия вашего веб-приложения - это преобразованный код для публикации на хостинг. Как на схеме ниже:
При этом, если исходный код вашего веб-приложения будет состоять из большого количества файлов и компонентов, то для публикации вашего веб-приложения на хостинг, в результате преобразования, вы получите всего несколько файлов, при этом, webpack можно настроить таким образом, чтобы он сжимал весь конечный код и даже автоматически оптимизировать изображения вашего проекта.
Это позволяет сокращать размер вашей страницы и в итоге ваше веб приложение будет загружаться у пользователей быстрее. А быстрая загрузка сайта - один из важнейших факторов для успешного продвижения сайта.
Более того, вы можете настроить webpack таким образом, что когда вы вносите изменения в ваш код, он будет на лету преобразован в код для публикации, а также страница в браузере будет автоматически обновлена.
В следующих уроках я покажу как настроить webpack для вашего проекта. Так же с помощью webpack мы интегрируем Babel JS в наш проект, для написания кода на современном javascript.
Это один из уроков большого курса по современному Javascript.
С уважением, Сергей Никонов
Успехов в обучении!