Тёмный

🔥 JavaScript СОВРЕМЕННАЯ разработка ЗА 1 ЧАС | NodeJS | NPM | WebPack | Import Export | CSS-Loader 

DKA-DEVELOP
Подписаться 137 тыс.
Просмотров 55 тыс.
50% 1

📢 Уроки JavaScript модульная разработка
🙉 Канал в телеграмм: bit.ly/2QcOXD4
💕 Канал для ардуинщиков и программистов: bit.ly/2SMUUYs
☕🍗 Патреон, поддержи автора:
/ dkadevelop
🔹 Другие реквизиты на сайте автора:
dka-develop.ru/blog/donation
🔹 Используемый редактор:
Visual code: code.visualstudio.com/
📢 ТаймКод:
0:00 О чем видео
0:45 Что такое NodeJS
3:32 Установка NodeJS на Windows
8:04 Отличие от обычного написания кода без NodeJS
11:36 Что такое NPM и как им пользоваться
16:30 Что такое Yarn
17:12 Установка пакета с использованием NPM
19:31 WebPack знакомство / что это?
22:24 Что упрощает WebPack / модульность
24:50 Создание проекта с использованием NPM / Webpack
27:39 Интеграция WebPack в проект / Что такое Webpack-CLI
36:17 webpack.config.js создание
40:19 WebPack слежение за файлами
41:14 WebPack Dev Server
44:15 Модульная разработка что это Export Import?
52:51 Генерация HTML
1:00:53 Подключение jQuery в проект
1:04:15 Подключение CSS файлов
1:08:23 Генерация файла html и подключение скриптов JS
📢 Полезные ссылки:
- Введение в пакетный менеджер NPM для начинающих
prgssr.ru/development/vvedenie...
- WebPack начало:
webpack.js.org/guides/getting...
- WebPack точка входа
webpack.js.org/concepts/entry...
- Настройки WebPack Dev Server:
webpack.js.org/configuration/...
- WebPack Loader / Загрузчик CSS:
webpack.js.org/loaders/css-lo...
- Stackoverflow style-loader / Загрузчик STYLE:
stackoverflow.com/questions/3...
- HTML WebPack Plugin:
webpack.js.org/plugins/html-w...
🌍 Официальный сайт:
dka-develop.ru
© Music:
RU-vid Library
#javascript #js #ityoutubersru

Опубликовано:

 

8 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 265   
@DKADEVELOP
@DKADEVELOP 4 года назад
Первая часть: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xErYDWhoVgE.html 📢 ТаймКод / Оглавление: 0:00 О чем видео 0:45 Что такое NodeJS 3:32 Установка NodeJS на Windows 8:04 Отличие от обычного написания кода без NodeJS 11:36 Что такое NPM и как им пользоваться 16:30 Что такое Yarn 17:12 Установка пакета с использованием NPM 19:31 WebPack знакомство / что это? 22:24 Что упрощает WebPack / модульность 24:50 Создание проекта с использованием NPM / Webpack 27:39 Интеграция WebPack в проект / Что такое Webpack-CLI 36:17 webpack.config.js создание 40:19 WebPack слежение за файлами 41:14 WebPack Dev Server 44:15 Модульная разработка что это / Export Import 52:51 Генерация HTML 1:00:53 Подключение jQuery в проект 1:04:15 Подключение CSS файлов 1:08:23 Генерация файла html и подключение скриптов JS
@OnlyLuck1000
@OnlyLuck1000 4 года назад
Пересмотрел много видео уроков для Front-End, также прошел офлайн курсы. Обучение шло туго и медленно, начал уже сомневаться в своих умственных способностях. Но в твоих видео все понятно и доходчиво, за счет того, что ты объясняешь все новые термины и понятия + добавляешь визуальные примеры. В итоге складывается полная картина и понимание(даже дети от 10 смогут понять материал) Спасибо большое за труд! Ты лучший! Успехов тебе во всех сферах жизни :))
@oleksandrsydorenko3303
@oleksandrsydorenko3303 4 года назад
Чётко, ясно, с примерами из жизни Спасибо автору за грамотное разъяснение!
@werlokcf7084
@werlokcf7084 4 года назад
О да, долго ждал это видео, так держать!
@DKADEVELOP
@DKADEVELOP 4 года назад
🖖🔥
@dmitriy_surovtsev
@dmitriy_surovtsev 4 года назад
Слов нет. Огромное человеческое спасибо за ваш труд! С нетерпением ждём продолжения.
@HTMLHarbor
@HTMLHarbor 4 года назад
Спасибо большое, получилось всё как в уроке. Ждём следующую часть.🔥👌
@webkoth6105
@webkoth6105 4 года назад
Все круто. Подача отличная, собирается картина в голове. Продолжай!
@DKADEVELOP
@DKADEVELOP 4 года назад
👍🔥
@user-xb1cd9wr8l
@user-xb1cd9wr8l 2 года назад
@@DKADEVELOP А что делать если после того как скачал вебпак в main.js не было никакого заранее написанного вебпаком кода?
@fenics764
@fenics764 4 года назад
Просто кайф смотреть твои видео. Получаешь удовольствие, когда информация сама заливается в твой мозг без усилий. Пожалуйста, продолжай делать, у тебя талант к преподаванию. Хотелось бы видеть видео по продвинутым темам, а не только базу
@web4453
@web4453 2 года назад
Это даже не уроки по программированию, а целое искусство)) Большое вам спасибо за такой труд!
@dimagololobov2703
@dimagololobov2703 4 года назад
Долго ждал Новый урок! Ты как всегда- лучший!) так держать, колоссальная, мощная и сильная работа! Удачи тебе) очень круто делаешь, особенно дикция🔥👌
@DKADEVELOP
@DKADEVELOP 4 года назад
Спасибо, дружище 🖖
@linkway4471
@linkway4471 3 года назад
Обычно комментарии не пишу, просмотрев весь курс по js, начал по node.js , и не могу не написать о том, как же круто ты подаешь информацию. Большое спасибо за твой труд! (подписался совсем недавно)
@vasyl_bielkin
@vasyl_bielkin 4 года назад
Срочно нужно продолжение. Красавчик!
@VTRSony
@VTRSony 4 года назад
Всё круто, спасибо, жду следующую часть
@TemposYS
@TemposYS 3 года назад
отличный курс! очень подробно и доступно! приятно слушать, один из немногих обучающих видео, под которые не хочется спать )))) успехов!
@user-hz3tr9bu1h
@user-hz3tr9bu1h 4 года назад
Дка, снимай почаще видео, у тебя полноценно подаётся информация, а такое трудно найти
@webypanda2861
@webypanda2861 4 года назад
Шикарнейший, Шикарнейший видос! и как же он кстати пришелся.
@gagn81
@gagn81 3 года назад
Спасибо Вам огромное за этот великолепный материал! Дай Бог Вам здоровья и всех благ!
@Sergey-rg3ry
@Sergey-rg3ry 4 года назад
Спасибо огромное, подача материала супер! Давно не встречал подобных уроков, где нет воды, но в то же время объясняется вся логика, что откуда растёт и как взаимодействует. Многие вещи не понимал, почему именно так, теперь всё стало на свои места
@DKADEVELOP
@DKADEVELOP 4 года назад
🔥👍
@serge.stecenko
@serge.stecenko 4 года назад
Очень крутой материал, большое тебе спасибо! Всё очень подробно и понятно изложено. Уже подписан на твой Телеграм канал и жду продолжения! Ещё раз благодарю!
@Anna-vm9sf
@Anna-vm9sf 4 года назад
Спасибо большое, ждем с нетерпением новое видео!
@user-fx5dc6kf7s
@user-fx5dc6kf7s 4 года назад
Зашло, прям вовремя. Автору респект!!!
@pherum
@pherum 4 года назад
Большое спасибо за новый труд!
@vldkv
@vldkv 4 года назад
Спасибо большое за видео!Продолжайте)
@user-lp6fl1hy3h
@user-lp6fl1hy3h 4 года назад
Спасибо, Отличное видео, все по полочкам, от простого к сложному.
@muborizDev
@muborizDev 4 года назад
Огромное спасибо за ролик , все по полочкам разложили и объяснили .
@mikkabond5530
@mikkabond5530 4 года назад
Видос огонь....особенно оформление! Вот реально даже не знал с чего начать разбираться в этом море js инструментов и зачем это все, когда можно подключить скрипт в хтмл снизу...теперь все по полкам!!! Респект, бро. Лайк))
@user-fj6nz2zi6g
@user-fj6nz2zi6g 3 года назад
Спасибо! Добавил видео к себе в плейлист. Чтобы долго не искать при необходимости:)
@0xc591
@0xc591 3 года назад
Капец, сэкономил себе пол жизни, автор красавчик однозначно лайк за такой контент.
@user-lg6wg9sg7m
@user-lg6wg9sg7m 4 года назад
Просто зашло... Автор браво... Если следующее видео будет более углубленное было бы круто! Спасибо тебе!
@ngc-4826
@ngc-4826 4 года назад
Все круто, посмотрел обе части, материал изложен понятно и просто для понимания. Подача контента это вообще что-то новенькое, обучение программированию основываясь на визуальном восприятии я ещё не видел. Везде одно и то же, среда разработки, код в ней и озвучка автора. А тут что-то новенькое. Все получилось очень удачно, жду новых роликов
@Ogr285
@Ogr285 3 года назад
Классный ролик. Куча труда вложена. Спасибо!
@user-qg1wi9ce8r
@user-qg1wi9ce8r 4 года назад
спасибо большое посмотрел все видео от начала до конца!
@perseveranse
@perseveranse 4 года назад
Вчера захотел посмотреть ролики по джеес и тут такое ураааа
@natanrock4358
@natanrock4358 4 года назад
Супер, спасибо)
@hakunamatata7779
@hakunamatata7779 4 года назад
Многих пересмотрела по урокам и остановилась на вашем канале. Очень подробно, доходчиво и голос приятный 😃 p.s. не пропадайте ✌
@SturmerSS
@SturmerSS 4 года назад
Весьма информативно и доходчиво все. Спасибо!
@denysivashchenko2080
@denysivashchenko2080 3 года назад
Доходчиво !) ждем продолжение
@mykhailobokalo6037
@mykhailobokalo6037 4 года назад
Большое спасибо. Лучшая подача материала для меня!!
@codercoder2753
@codercoder2753 4 года назад
Как всегда годнота!
@user-wv7tx4mb6d
@user-wv7tx4mb6d 4 года назад
Спасибо за столько нужный материал))
@muborizDev
@muborizDev 4 года назад
Отличный канал , побольше таких видео )
@BLHA-ib3rf
@BLHA-ib3rf 4 года назад
Все класно, ждем продолжения!!!!
@vimanshin
@vimanshin 4 года назад
Отличное видео, очень подробно и интересно подано. Молодец!
@vitaliytaller100
@vitaliytaller100 4 года назад
И почему я раньше об этом канале не знал!? +1000 лайков и подписка... Спасибо тебе за труды!!!
@3anuda
@3anuda 4 года назад
Отличная подача материала! Час пролетел незаметно)
@sergafanasiev7956
@sergafanasiev7956 4 года назад
Шикарно!!!
@user-ty6fq9os9k
@user-ty6fq9os9k 4 года назад
Спасибо, мощный выпуск!!!
@londhor
@londhor 4 года назад
Спасибо! Кратко, информативно, понятно 👌🏻
@DKADEVELOP
@DKADEVELOP 4 года назад
Пожалуйста!
@user-ov6cs4ds8k
@user-ov6cs4ds8k 3 года назад
Это ж надо было так заморочиться со склянками. Спасибо тебе большое! Лайк однозначно. Очень помогаешь понять абсолютному новичку что есть что.
@vitaliytaller100
@vitaliytaller100 4 года назад
Лучший туториал по webpack и модулям!!!!!
@user-pw4ny6xk7d
@user-pw4ny6xk7d 4 года назад
Отличная подача! Невысокий темп рассказа, визуальные аналогии и детальный разбор каждого мельчайшего шага помогают усвоить материал. Очень ждем новых уроков! Хотелось бы послушать от Вас материал про React и разработку Backend`а с подключением БД. Закрепить можно было бы стримом с разработкой проекта, приближенного к реальному. Спасибо Вам! Лайк, Подписка, Колокольчик.
@kostasancez2358
@kostasancez2358 4 года назад
Большое спасибо, очень круто
@arseniymarkov5502
@arseniymarkov5502 3 года назад
продолжай творить потрясающая подача материала
@user-zo2jn8gu5j
@user-zo2jn8gu5j 4 года назад
Огромное спасибо тебе из Казахстана . Я блогадорю тебя за все твои уроки особенно по laravel , и желаю тебе дольнейших успехов
@mikebl8670
@mikebl8670 4 года назад
Крутяк! Ти супер!
@user-eq7fu9sd5z
@user-eq7fu9sd5z 4 года назад
Благодарю,за прекрасные уроки,если бы когда я изучал js эти уроки были, было бы намного легче)
@fessan8918
@fessan8918 4 года назад
Спасибо! Интересно!
@baxtik88
@baxtik88 Год назад
Спасибо большое автору
@marynakosiv3750
@marynakosiv3750 4 года назад
очень крутой визуал! лайкиии лайкиии
@gvitoss
@gvitoss 4 года назад
мне вебпак показался сложнее галпа, но суть работы примерно та же. Круто все делаешь, продолжай!)
@NeedForHeavyMetal
@NeedForHeavyMetal 2 года назад
Спасибо тебе большое. Спасибище!
@evgeniy3224
@evgeniy3224 3 года назад
Да это было очень полезно!!!
@nero6818
@nero6818 4 года назад
я так ждал ))) спс
@DKADEVELOP
@DKADEVELOP 4 года назад
🖖🔥
@user-ik1in6zt4y
@user-ik1in6zt4y 4 года назад
Спасибо за вашу работу!
@DKADEVELOP
@DKADEVELOP 4 года назад
Пожалуйста!🔥
@webypanda2861
@webypanda2861 4 года назад
шикарный курс +500
@rostuslavnab9128
@rostuslavnab9128 4 года назад
очень круто, автор топ
@mishabogachev
@mishabogachev 4 года назад
!superКрасавчик С меня облайк))
@Indy_660
@Indy_660 4 года назад
Ооочень крутые у тебя ролики. Серьёзно, лучше по качеству обучающих видеороликов по программированию в ру-сегменте ещё не видел.
@DKADEVELOP
@DKADEVELOP 4 года назад
👍
@leafaro911
@leafaro911 3 года назад
Надо будет пересмотреть видосы
@user-gk5vm5gv4z
@user-gk5vm5gv4z 4 года назад
Здорово! Возможно, я несильно искушенный зритель, но подача материала- лучшее, что я видела. Я просто не представляла, что ТАК возможно. А Вы можете снять видео как Вы делаете ролики, какими инструментами пользуетесь? Мне очень интересно...
@kirintsev
@kirintsev 4 года назад
отлично, все получилось
@andrewtsekhanovskyy3130
@andrewtsekhanovskyy3130 4 года назад
Спасибо!
@vueprojects550
@vueprojects550 3 года назад
Давай следующую часть!
@Woldworine
@Woldworine 4 года назад
Спасибо))
@SHKIPPER989
@SHKIPPER989 4 года назад
Лайк за старания!...)
@exploringtheworld8780
@exploringtheworld8780 3 года назад
Спасибо
@antonglebov598
@antonglebov598 2 года назад
как я раньше проходил мимо этого канала? Талант)
@user-sf2hd2bu2n
@user-sf2hd2bu2n 3 года назад
Это видео было посложнее остальных, так как знакомство было впервые. В другом месте говорилось, что webpack самый сложный из сборщиков. Я пыталась понять gulp, я его вроде и понимала, но не совсем, составлять под нужный мне проект, отбирать нужное, это для меня было сложновато. Я набрала много проектов с разными gulpfile.js и пыталась понять чем они отличаются, почему в одних код написан так, а в других по другому, искала отличия и пыталась запомнить что за что отвечает. Но так как у меня до ваших обучающих уроков было совсем маленькое представление об JS об объектах, функциях и других элементарных вещах, полностью понять и научиться составлять под разные проекты по своему, мне было сложновато. Думаю, что сейчас если попробовать, то всё получиться. А с webpack знакомиться даже не собиралась, но так как 1 уровень понравился, решила просмотреть и второй. По вашим урокам, он мне показался не сложнее gulp. Конечно я многое ещё не знаю, но начальное представление о нём уже сложилось, благодаря этому видео и знаю где можно почитать и ознакомиться более детально при желании, жаль только что не всё на знакомом мне языке, а переводчик иногда не совсем понятно переводит. Ещё раз спасибо за уроки! Буду пробовать и 3 уровень просматривать, хоть не знаю понадобиться ли мне всё это в дальнейшем. Но изучать по вашим видео мне нравиться, выполнять и видеть, что у меня всё получается также как и у вас. А вот по другим видео урокам, не всегда выходило гладко, в консоле часто ошибки были и я не знала просто что мне с ними делать и как их устранять. А вы ещё и учите как их решать, как общаться с консолью в живую, показываете из-за чего они могут возникнуть и это мне очень нравиться.
@user-xi7tp3vm1t
@user-xi7tp3vm1t 4 года назад
жду твоих уроков)
@anthonybrief2876
@anthonybrief2876 4 года назад
Шикарный урок, 5+++. Хотел спросить, какая у вас тема и шрифт в VS Code?
@salo-salomskhvilidze1947
@salo-salomskhvilidze1947 3 года назад
Respect from Georgia :*
@vugarkhalil
@vugarkhalil Год назад
Ты чудесно объясняешь
@dumakisa
@dumakisa 4 года назад
Спасибо! Теперь webpack не так страшен!
@user-oh3zv3oj4m
@user-oh3zv3oj4m 4 года назад
а когда следующие уроки будут? Очень круто объясняешь!!!1
@user-zb7nu5et8o
@user-zb7nu5et8o 4 года назад
Вау, спасибо чел)
@DKADEVELOP
@DKADEVELOP 4 года назад
Пожалуйста Bro!
@strongelephant6789
@strongelephant6789 4 года назад
Какой же Вы всетаки умница! Хочется пошутить - насколько доходчиво вы знакомите с материалом, что моя собака уже устроилась в Google, теща спорит об асинхроности, жена собирает REST API для сбербанка, а сын попивает сок с Тейлором Отвел)) Спасибо Вам большое!
@DKADEVELOP
@DKADEVELOP 4 года назад
👍☺
@user-rg5rn6sr2p
@user-rg5rn6sr2p 4 года назад
Круто лайк не глядя...А будет продвинутое изучение js И node.jz
@GLUCKKKKKKKKKK
@GLUCKKKKKKKKKK 3 года назад
Про носорога - тонко было)
@ruslanegamoff5393
@ruslanegamoff5393 3 года назад
Спасибо!!! А продолжение будет?
@Anatoly555
@Anatoly555 3 года назад
Очень приятно просматривать такие ролики! Причём, даже с учётом, что разработчик далеко не начинающий - разжёвывание тривиальных вещей не напрягает, абсолютно. Вопрос, программирование - только веб? Не планируешь ли что-нибудь по тренду мобильной разработки? Flutter, например. Ну или смежную тему - PWA
@DKADEVELOP
@DKADEVELOP 3 года назад
В свое время опыт разный был и мобильный и настольный с мобильными клиентами, но остановился больше на веб.
@FreePhoenix888
@FreePhoenix888 3 года назад
Визуализация ,ориентированность на запоминание.Вообщем много опыта в изучении и обучении .Молодец.Такой вопрос ,большая ли разница между галпом и вебпаком?
@skyrim7732
@skyrim7732 3 года назад
спасибо
@user-ui3tb8kw3k
@user-ui3tb8kw3k 4 года назад
Куда же вы пропадали( так долго видео ждать с нетерпением пришлось (
@DKADEVELOP
@DKADEVELOP 4 года назад
Теперь видео будут реже, но зато длиннее и полноценнее, всегда рад вас видеть на других своих каналах: Cool Easy Diy или БородаДжон, отсутствие видео тут компенсируется выпусками там.
@ilya5366
@ilya5366 4 года назад
Новый формат с тайм кодами очень даже не плох, хоть видео стали реже появляться, но качество материала и способность в нем сориентироваться на 5++ )
@DKADEVELOP
@DKADEVELOP 4 года назад
🔥👍
@iraold5367
@iraold5367 4 года назад
Смотрела , смотрела а телеке , решила свой убитый ноут достать для подписки, . Спасибо за уроки .жирный лайкос
@serialsRUS1
@serialsRUS1 4 года назад
🔥👍
@user-zq1pf5jd7s
@user-zq1pf5jd7s 3 года назад
Французское вуаля это хорошо, а древнеславянская мантра У-Ра ещё лучше. Спасибо за полезную информацию. Удачи и продолжения!
@user-yh6hy7zr2b
@user-yh6hy7zr2b 3 года назад
круто
@ermineKA9
@ermineKA9 3 года назад
Question : Эти плагины (npm ... ) что мы устанавливали в VScode они разовые только на 1 проект или они постоянные, раз установил и будут в программе постоянно?
@gamertiktok4461
@gamertiktok4461 Год назад
Пожалуйста проду
Далее
Fried egg salad sandwich 🥪 #shorts
00:20
Просмотров 3,3 млн
Разбираем основы Kafka и RabbitMQ
26:54
JavaScript Pro Tips - Code This, NOT That
12:37
Просмотров 2,5 млн
NPM пакет от А до Я. Для нубов
22:15
Node JS - Быстрый Курс за 1 час
1:01:52
Просмотров 534 тыс.