Что такое WEBPACK, его настройка и основные концепции (2020)

Базовая настройка WEBPACK для верстки.
Материалы видео github.com/bor...
CSS LOADER webpack.js.org...
BABEL LOADER webpack.js.org...
SASS LOADER webpack.js.org...
Подписывайтесь на Telegram канал: t.me/boringfe
#урокпрограммирования #ITкурсы #javascript

[@boringfrontend9037]

Группа instagram в instagram.com/fun_front_end/ Канал в ТГ t.me/boringfe Patreon: www.patreon.com/boringfrontend

[@twainprod]

Очень люблю уроки Владилена Минина, но 3-х часовой урок меня не хватило, решил поискать альтернативу, т.к. нужно освоить Webpack для работы. Остановился на этом уроки и не пожалел! Очень крутое видео, всё четко и понятно, простым языком и с примерами. Большое спасибо, очень удивился, что так мало подписчиков. Процветания каналу, не сдавайся! P.S. Сейчас уже не надо писать такой длинный путь в скриптах, достаточно: "build": "webpack", "dev": "webpack --watch"

[@profidev_js]

Аналогично. 3 часа у Минина с его очень нудной подачей - это слишком тяжело

[@artsoldatkin]

100%

[@melenium]

))) аналогично,!! тоже пришла с 3х часового видео Минина

[@grantorino3465]

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

[@dreawmy2912]

Владилен плохо объясняет и упрощает/каверкает все.

[@Artyom_the_programmer]

Привет, Илья! Спасибо за твои видео-гайды. Посмотрел сначала про Babel и понял, что еще вернусь на этот канал за понятными и лаконичными уроками. Всё доступно и понятно объясняется и совсем даже не скучно 😃 Надеюсь канал будет развиваться и дальше. Странно, что так мало подписчиков

[@ВладБирюков-е7г]

Спасибо за видео, очень хорошо получается объяснять сложные темы. Один вопрос - почему так мало подписчиков на этом канале?)) Вы достойны большего внимания

[@boringfrontend9037]

Рад быть полезным! Вскоре планирую возобновить запись новых тем ;)

[@сергейбобров-д1н]

Посмотрел до этого некоторые виде по webpack ничего не понял , У вас самый лучший контент .все понятно , что и для чего .и где смотреть:) Спасибо.

[@jonathanlivingstone1818]

У кого не запускается на 7,41 в package.json вставьте в раздел scripts": "build": "webpack --mode production", "dev": "webpack --mode development"

[@annaa2940]

Спасибо, помогло.

[@ИринаТоболич-х6н]

спасибо большое за понятное объяснение. Хотелось бы конечно еще видеть расширенную настройку в Вашем исполнении.

[@boringfrontend9037]

Понял-принял :) В ближайшее время запишу :)

[@Test27Aleh]

Отличный урок/видео, всё что нужно и ничего лишнего.

[@ARMALON87]

Спасибо, большое! Доступно объяснили тему, в которой я плавал долгое время.

[@vlad-zf1ev]

лучшее объяснение webpack

[@КристианПринц]

огромное спасибо! понял благодаря тебе как работает инструмент

[@BorshBlack]

Название канал соответствует подаче материала. В основном, наверное, повлияла музыка на фоне, либо я уже утомился от чего-то другого и чуть не уснул пару раз) Вообще урок годный, спасибо)

[@yaroslavzef7267]

как корабль назовешь... )

[@BorshBlack]

@@yaroslavzef7267 так на нём и поплывешь

[@Arjeey]

Отличный материал! Вы талантливый препод

[@boringfrontend9037]

Это все опыт, спасибо за отзыв!

[@alinafitisova3176]

вау, ты оч круто и понятно объясняешь, спасибо тебе за видео !!!

[@sunrisegirl1262]

Спасибо за видео, помогли разобраться что такое Webpack!

[@dogober3861]

Спасибо. Информативно и понятно 👍

[@Evgeniy19856]

Отличный урок для общего понимания!

[@dmitrii_gerasimov]

Классный урок. Очень интересно и подробно. Спасибо.

[@Yuriny_Zatei]

Спасибо. Материал - то хороший. Говорить быстро, не значит хорошо. Пожалуйста, работайте над дикцией и не глотайте слова.

[@DaCentDD]

Супер, именно это видео я и искал, спасибо

[@JaratMan]

ее мое то что я искал , не понимал зачем нужен webpack а тут тебя нашел и все понял спс салам из KG

[@boringfrontend9037]

Рад, что было полезно. Спасибо за отзыв!

[@КириллЖуков-о3ч]

Большое спасибо , благодаря вам разобрался !

[@ruslan3040]

Благодарю!

[@DmitryDolganov]

Желаю мега процветание твоему каналу! Очень круто объясняешь!!!!!!!!!!! БЛАГОДАРЮ!

[@lolashepota4050]

It is very informative video. Well done! Many thanks!

[@stra1f595]

Спасибо тебе большое, сууууууууупер полезное видео

[@taleby-7401]

Отличное видео, спасибо! Очень наглядные схемы, а в чем вы их делали (анимировали)? Идеальная дикция, и скорость подачи материала! Только местами на ударение грешите, но т.к. остальное все классно - продолжаю смотреть)

[@boringfrontend9037]

Делаю все в keynotes и обрабатываю в imovie

[@pfk9025]

Спасибо большое за труд! все предельно понятно, как говорится, все по полочкам. Посмотрел несколько видео по вебпаку, но это лучшее. Лайк и подписка. Процветания каналу!

[@ИванСоколин-ь2у]

Вчера был потрачен день на разбор конфига webpack по скринкасту одного известного (я думаю известного) сайта. Скринкаст устарел. И не смотря на то, что обновлённый webpack конфигурацией мало чем отличается от того, который описывался в скринкасте - основные концепции я понял именно тут. Спасибо большое автору!

[@boringfrontend9037]

Спасибо за такой отзыв! Теперь я знаю, что потратил время не зря.

[@МихаилГоляков-е2л]

очень известный сайт называется learn javascript я сам там время убил

[@natanrock4358]

Лучший)

[@ПавелБелослудцев-б5о]

СПА-СИ-БО!!!!! премного благодарен!

[@Karlosanjelos]

Спасибо огромное за материал. Я подписался.

[@boringfrontend9037]

Спасибо за отзыв!

[@artsoldatkin]

Красавец 👍

[@JohnCarter-xu5pg]

Очень круто и понятно)) Не могли бы подсказать как называется тема для vs code которой вы пользуетесь в видео долго пытался найти заранее огромное спасибо)

[@89cls91]

Тараториш страшно. Это глупо. Контен качественный и за это спасибо.

[@yaroslavzef7267]

Хорошо получается объяснять. Жаль что забросил канал

[@boringfrontend9037]

Ну як би володимир Хуйло(путін) не розпочав війно то напевне далі б робив, а зараз дещо інщі пріорітети

[@МихаилДжекович-л1щ]

Не билдится с 7:45 подскажите пожалуйста почему выдает ошибку internal/modules/cjs/loader.js:548 throw e; ^ Код точь в точь как у вас

[@andrewandrosow4797]

Добрый день! Отличное видео! Есть ли у вас что-либо по теме postcss/autoprefixer ? Несколько часов разбирался - так и не смог: куча вложенных друг в друга обьектов и массивов....

[@boringfrontend9037]

В планах есть записать видео что такое postcss и как его использовать

[@andrewandrosow4797]

@@boringfrontend9037 спасибо! будет интересно глянуть!

[@АртурРахматов-г4ъ]

Спасибо

[@boringfrontend9037]

Всегда пожалуйста! Рад, что было полезно

[@WhyNot-vr3tw]

Спасибо! Все очень круто и понятно в отличие от. Например, есть такой тип Владилен Минин, так вот он берет материал от зарубежных авторов, переводит, мб делает какие-то минимальные изменения и выдает их за свои. Например "50 вопросов по реакт на собеседование" и др. И такое ощущение, что он просто не очень умный, рассказывает плохо, акцентирует не на тех вещах или не рассказывает в целом и тд и тп. Хз как объяснить - но крч когда слушаешь умного человека, который шарит в теме, сразу понимаешь, что он умный, то что он рассказывает - понятно. это видно сразу. и также сразу понимаешь, если человек тупой, как владилен. Например, после того как более менее прочитал learn.javascript.ru и смотришь его видос по js, то сразу видно что очень многие вещи он просто упускает или рассказывает не так, что может вызвать неправильное представление и понимание.

[@boringfrontend9037]

Благодарю за такой развернутый отзыв!

[@castiliOR]

Владилен не тупой, он крайне доступно обьясняет. Почему ты такой токсик?

[@easymoneydamnsniper]

@@castiliOR он объясняет так, как объясняет Traversy Media, не больше - не меньше

[@nikolaysmagin787]

От куда в терминале строка Webpack сразу дана?

[@boringfrontend9037]

это название самой директории которая открыта в VSCode(в которой запущен терминал)

[@nikolaysmagin787]

@@boringfrontend9037 спасибо)

[@_fulgrim_9865]

Добрый день а как подключить HTML?

[@EvgenichTalagaev]

А что за среда разработки у вас используется?

[@boringfrontend9037]

Обычный VSCODE, перешел уже как год назад, рекомендую

[@Интернетобразование-о1и]

htlm - какой то новый язык разметки?😀

[@boringfrontend9037]

Новейший :)

[@oksanagaltsov5947]

"terser-webpack-plugin": "^5.0.0", "webpack": "^4.44.2", почему невозможно построит build а когда я отклучаю terser-webpack-plugin вы можете подсказать

[@boringfrontend9037]

Если сможете дать ссылку на гитхаб с вашей настройкой, попробую помочь. С информации по комментарию не достаточно иформации :(

[@formikarufa4127]

Замечательно! Только музыку бы отключить.

[@moschino7107]

Что такое -D ??

[@boringfrontend9037]

npm install -D - значит установить как девелопмент зависимость, это нужно для разделения зависимостей на те которые используются для самой программы и для разработки :)

[@mind150]

5:27 я лично ничего не понял)) уже тут у меня все крашится и вылезают ошибки

[@ТатьянаЛяпкина-ь8о]

Тоже самое... Только я их обошла чуть и дошла до 7:45..

[@sewerlock]

МодулЯ

[@Elmirill]

модулЕй. закрыл и забыл.

[@aidajam3294]

Музыка бесит

[@serhii_ts]

Галп - не бандлер!

[@boringfrontend9037]

Галп это таск раннер, веб пак изначально бандлер пакетов, но в текущий момент вебпак используется как альтернатива галпу на большинстве ФЕ проектов по этому их сравинвать уместно как инструменты которые выполняют аналогичные задачи. Если бы видео снималось в 2015 то вебпак сравнивался бы с broserify

[@serhii_ts]

@@boringfrontend9037 как альтернатива, как дополнение, но галп - не бандлер, хотя в нем можно запускать тот же вебпак

[@zobakk]

Каких нафиг модулЕй?! На каком это языке?

[@boringfrontend9037]

Мой собственный :)

[@siarheypantsialeyenka1724]

не понравилось, много чего не хватает, полная хрень

[@boringfrontend9037]

сожалею о вашем потраченном напрасно времени (нет)

[@whiteguards43]

Диз за музыку, мешает сосредоточиться!

[@AntonioBenderas]

Я вообще музыку не слышу, поэтому диз тебе)

[@OleksandrDanylchenko2k]

Очень доходчиво и лаконично. Спасибо!