Что такое Webpack? Современные инструменты frontend-разработчика

4 years ago | 12.9K

 

Всех приветствую, с вами Сергей Никонов и в этом уроке я расскажу про Webpack.

Итак, что же такое Webpack?

Webpack - это инструмент для сборки современных frontend-приложений.
В настоящий момент, по популярности, Webpack опережает похожие инструменты, такие как Gulp и Grunt.

Логика работы очень простая, но для того, чтобы понять какие задачи решает Webpack, вам необходимо понимать из чего состоит современное веб-приложение.

Смотрите видео Что такое Webpack

 

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

Браузеры пока в полной мере не поддерживают эти технологии и по этой причине, для преобразования кода на современном JavaScript в JavaScript ES5 и перевода кода из SASS в css и многих других задач, используются дополнительные инструменты, такие как webpack.

Когда вы один раз настроите Webpack для вашего фронтенд приложения, вебпак будет автоматически выполнять все рутинные задачи, а вам останется только наслаждаться написанием вашего кода!

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

webpack-modernjavascript-fructcode

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

Это позволяет сокращать размер вашей страницы и в итоге ваше веб приложение будет загружаться у пользователей быстрее. А быстрая загрузка сайта - один из важнейших факторов для успешного продвижения сайта.

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

В следующих уроках я покажу как настроить webpack для вашего проекта. Так же с помощью webpack мы интегрируем Babel JS в наш проект, для написания кода на современном javascript.

Это один из уроков большого курса по современному Javascript.

С уважением, Сергей Никонов

Успехов в обучении!



Поделитесь в социальных сетях





Читайте также

Что такое NodeJS и npm?

На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой...
18.0K

Большое обновление FructCode

Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм...
5.1K

Что такое Modern Javascript?

Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,...
14.0K

Классы в JAVASCRIPT

У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис...
18.1K

Что такое веб-хостинг

Хостинг - это специализированный компьютер (сервер), который предоставляет пользователям возможности...
5.8K

Как убрать index.php из URL

Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с...
34.2K

Что такое файл index.php?

В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост...
97.6K























Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
пока нет оценок
Sergei Nikonov
  • Новинка!
  • 162 заданий
  • 60 видео
  • 17 часов

Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Bootstrap 4 в разработке

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки VueJS в разработке

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Yii2 в разработке

Курс Modern Javascript. Обучение программирования, уроки программирования
Курс Modern Javascript. Обучение программирования, уроки программирования
new
4.8 / 164
Sergei Nikonov
  • Новинка!
  • 30 заданий
  • 16 видео
  • 1 час

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.7 / 1671
Sergei Nikonov
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 649
Sergei Nikonov
  • 28 заданий
  • 26 видео
  • 5 часов

Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
4.9 / 1112
Sergei Nikonov
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 1420
Sergei Nikonov
  • 69 заданий
  • 37 видео
  • 5 часов

Курс Bootstrap 3. Обучение программирования, уроки программирования
Курс Bootstrap 3. Обучение программирования, уроки программирования
4.9 / 2502
Sergei Nikonov
  • 50 заданий
  • 25 видео
  • 4 часа

Курс HTML/CSS. Обучение программирования, уроки программирования
Курс HTML/CSS. Обучение программирования, уроки программирования
4.9 / 4951
Sergei Nikonov
  • 66 заданий
  • 32 видео
  • 5 часов