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

Webpack - инструмент упрощающий разработку современных web интерфейсов. На данный момент почти все популярные вэб фреймворки используют его по умолчанию для сборки итоговых приложений и облегчения процесса их разработки. Основная задача webpack - обнаружение файлов с исходными кодами, выявление их типов, зависимостей друг от друга и внешних библиотек, и сборка их в отдельно взятые простые js и css файлы, загружаемые на клиента.
Для работы webpack требуется установленные node.js и npm. Видео с инструкцией по установке находится тут:
• Node.js: NPM - пакетны...
Для проверки корректности настроек и работы webpack мы будем активно использовать инструменты разработчика, встроеные в браузер. Видео, показывающее, как использовать инструменты разработчика:
• JavaScript debug: отла...
Страница проекта webpack:
webpack.js.org/
При сборке проекта webpack склеивает все файлы в один bundle (пачку), добавляя служебный код, и максимально упрощая структуру приложения, удаляя “мёртвые куски” и подставляя код методов используемых однократно, по месту вызова. Всё это усложняет чтение итоговых сценариев при отладке в браузере. Для таких ситуаций были придуманы SourceMap, которые весьма успешно генерирует Webpack. Настройка SourceMap в Webpack описана по ссылке:
webpack.js.org...
Часто при разработке web приложений используется другой язык, нежели привычный JavaScript, например TypeScript, CoffeeScript или JavaScript с новыми функциями, не поддерживаемыми современными браузерами. В такой ситуации используются лоадеры, преобразующие код в вид, поддерживаемый большинством использующихся браузеров. Поэтому мы подключаем к проекту Babel:
webpack.js.org...
Для более быстрой и удобной разработки с горячей перезагрузкой приложения при каждом изменении кода, мы подключаем сервер разработчика webpack:
webpack.js.org...
При работе с webpack-dev-server будет удобно переложить генерацию index.html файла приложения на плечи webpack. Для этого подключим плагин:
webpack.js.org...
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
➡ Твиттер: / letscodedru
➡ Чат в Discord: / discord
➡ Группа Вконтакте: letscod...
➡ Канал в Telegram: t.me/letsCode_dru
➡ Чат в Telegram: t.me/joinchat/...
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
Поддержать проект:
➡ Patreon / letscodedru
➡ Яндекс.Деньги money.yandex.r...
➡ PayPal paypal.me/letscodedru
➡ Qiwi qiwi.me/letscode
➡ WebMoney/BitCoin funding.webmon...
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
➡ Ссылка на канал: / @letscodedru
➡ Ссылка на Яндекс.Дзен: zen.yandex.ru/...