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

3 months ago | 7.2K

 

Всех приветствую, с вами Сергей Никонов и в этом уроке я расскажу про 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 и в этой...
6.4K

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

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

Что такое Modern Javascript?

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

Классы в JAVASCRIPT

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

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

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

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

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

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

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























Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Ориентировочная дата выхода нового урока - 25.04.2019

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Ориентировочная дата выхода нового урока - 28.04.2019

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Ориентировочная дата выхода нового урока - 30.04.2019

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

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.8 / 706
Сергей Никонов
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 513
Сергей Никонов
  • 28 заданий
  • 26 видео
  • 6 часов

Курс Linux/GIT/Хостинг. Обучение программирования, уроки программирования
Курс Linux/GIT/Хостинг. Обучение программирования, уроки программирования
4.9 / 593
Сергей Никонов
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 690
Сергей Никонов
  • 69 заданий
  • 37 видео
  • 6 часов

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

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