Webpack - сборщик web приложений (в простые js и css) HD

Webpack - инструмент упрощающий разработку современных web интерфейсов. На данный момент почти все популярные вэб фреймворки используют его по умолчанию для сборки итоговых приложений и облегчения процесса их разработки. Основная задача webpack - обнаружение файлов с исходными кодами, выявление их типов, зависимостей друг от друга и внешних библиотек, и сборка их в отдельно взятые простые js и css файлы, загружаемые на клиента. Для работы webpack требуется установленные node.js и npm. Видео с инструкцией по установке находится тут: https://youtu.be/TsM4Mekj_54 Для проверки корректности настроек и работы webpack мы будем активно использовать инструменты разработчика, встроеные в браузер. Видео, показывающее, как использовать инструменты разработчика: https://youtu.be/8ZKgsdxSdTc Страница проекта webpack: https://webpack.js.org/ При сборке проекта webpack склеивает все файлы в один bundle (пачку), добавляя служебный код, и максимально упрощая структуру приложения, удаляя “мёртвые куски” и подставляя код методов используемых однократно, по месту вызова. Всё это усложняет чтение итоговых сценариев при отладке в браузере. Для таких ситуаций были придуманы SourceMap, которые весьма успешно генерирует Webpack. Настройка SourceMap в Webpack описана по ссылке: https://webpack.js.org/guides/development/#using-source-maps Часто при разработке web приложений используется другой язык, нежели привычный JavaScript, например TypeScript, CoffeeScript или JavaScript с новыми функциями, не поддерживаемыми современными браузерами. В такой ситуации используются лоадеры, преобразующие код в вид, поддерживаемый большинством использующихся браузеров. Поэтому мы подключаем к проекту Babel: https://webpack.js.org/loaders/babel-loader/ Для более быстрой и удобной разработки с горячей перезагрузкой приложения при каждом изменении кода, мы подключаем сервер разработчика webpack: https://webpack.js.org/guides/development/#using-webpack-dev-server При работе с webpack-dev-server будет удобно переложить генерацию index.html файла приложения на плечи webpack. Для этого подключим плагин: https://webpack.js.org/concepts/#plugins ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Твиттер: https://twitter.com/letsCodeDru ➡ Чат в Discord: https://discord.gg/xs6XxSx ➡ Группа Вконтакте: https://vk.com/letscodedru ➡ Канал в Telegram: https://t.me/letsCode_dru ➡ Чат в Telegram: https://t.me/joinchat/FeiP9xEhqHajfqhLr4z-Nw ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ Поддержать проект: ➡ Patreon https://www.patreon.com/letscodedru ➡ Яндекс.Деньги https://money.yandex.ru/to/41001451675086 ➡ PayPal paypal.me/letscodedru ➡ Qiwi https://qiwi.me/letscode ➡ WebMoney/BitCoin https://funding.webmoney.ru/d/drucoder ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖ ➡ Ссылка на канал: https://www.youtube.com/channel/UC1g3kT0ZcSXt4_ZyJOshKJQ ➡ Ссылка на Яндекс.Дзен: https://zen.yandex.ru/media/id/5ac20956168a91ffeae449c5