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



📢 Уроки JavaScript модульная разработка
🙉 Канал в телеграмм: http://bit.ly/2QcOXD4
💕 Канал для ардуинщиков и программистов: http://bit.ly/2SMUUYs

☕🍗 Патреон, поддержи автора:
https://www.patreon.com/dkadevelop
🔹 Другие реквизиты на сайте автора:
https://dka-develop.ru/blog/donation
🔹 Используемый редактор:
Visual code: https://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 для начинающих
http://prgssr.ru/development/vvedenie-v-paketnyj-menedzher-npm-dlya-nachinayushih.html
— WebPack начало:
https://webpack.js.org/guides/getting-started/
— WebPack точка входа
https://webpack.js.org/concepts/entry-points/
— Настройки WebPack Dev Server:
https://webpack.js.org/configuration/dev-server/
— WebPack Loader / Загрузчик CSS:
https://webpack.js.org/loaders/css-loader/
— Stackoverflow style-loader / Загрузчик STYLE:
https://stackoverflow.com/questions/35171288/error-cannot-resolve-module-style-loader
— HTML WebPack Plugin:
https://webpack.js.org/plugins/html-webpack-plugin/

🌍 Официальный сайт:
https://dka-develop.ru

© Music:
YouTube Library
#javascript #js #ityoutubersru

Поставьте оценку!
[Всего: 0 Рейтинг: 0]
37 комментариев
  1. Первая часть: https://youtu.be/xErYDWhoVgE
    📢 ТаймКод / Оглавление:

    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

  2. Спасибо Вам огромное за этот великолепный материал!
    Дай Бог Вам здоровья и всех благ!

  3. Отличная подача материала, без воды. Лайк + подписка!

  4. Здравствуйте. команда npm run dev выкидывает ошибку. Подскажите пожалуйста как решить?

    > webs@1.0.0 s /home/kali/Desktop/webs
    > webpack-dev-server

    internal/modules/cjs/loader.js:1033
    throw err;
    ^

    Error: Cannot find module 'webpack-cli/bin/config-yargs'
    Require stack:

  5. Добрый день девелоперы. такой вопрос возник. поясните пож-ста кто в теме. Webpack сам по себе мощный инструмент где можно модульно все делать и собирать в dist. Но насколько я понял VUE.SJ создан для такого же облегчения задач. дак в чем разница? или vue это более продвинутая альтернатива. Хотя по мне дак и webpack достаточно покрывает всё. Или я что-то не понимаю.

  6. Может быть я пока что — то не понимаю, но программирование должно же идти по пути упрощения задач? Здесь же видно как надо заморочиться чтобы сделать сайт html с css.
    Спасибо за Ваш труд.

  7. При установки webpack-dev-сервер появилась ошибка. Может кто знает как починить? помогите пж
    npm ERR! code ERESOLVE

    npm ERR! Cannot read property 'length' of undefined

    npm ERR! A complete log of this run can be found in:

    npm ERR! C:UsersIlyaAppDataLocalnpm-cache_logs2020-11-17T21_01_37_456Z-debug.log

  8. Привіт! Дякую за відео. При запуску "bulid" main.js — пусто. Підкажи чому так?

  9. При такой аналогии экспорта он просто не должен работать)

  10. Что за тема в VS code у тебя?

  11. у меня не работает webpack-dev-server

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

    > dka@1.0.0 dev

    > webpack-dev-server

    node:internal/modules/cjs/loader:903

    throw err;

    ^

    Error: Cannot find module 'webpack-cli/bin/config-yargs'

    Require stack:

    — E:domaindkanode_moduleswebpack-dev-serverbinwebpack-dev-server.js

    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:900:15)

    at Function.Module._load (node:internal/modules/cjs/loader:745:27)

    at Module.require (node:internal/modules/cjs/loader:972:19)

    at require (node:internal/modules/cjs/helpers:88:18)

    at Object.<anonymous> (E:domaindkanode_moduleswebpack-dev-serverbinwebpack-dev-server.js:65:1)

    at Module._compile (node:internal/modules/cjs/loader:1083:30)

    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)

    at Module.load (node:internal/modules/cjs/loader:948:32)

    at Function.Module._load (node:internal/modules/cjs/loader:789:14)

    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:72:12) {

    code: 'MODULE_NOT_FOUND',

    requireStack: [

    'E:\domain\dka\node_modules\webpack-dev-server\bin\webpack-dev-server.js'

    ]

    }

    npm ERR! code 1

    npm ERR! path E:domaindka

    npm ERR! command failed

    npm ERR! command C:Windowssystem32cmd.exe /d /s /c "webpack-dev-server"

    npm ERR! A complete log of this run can be found in:

    npm ERR! C:UsersKosAppDataLocalnpm-cache_logs2020-10-30T16_34_31_014Z-debug.log

  12. Классный ролик. Куча труда вложена.
    Спасибо!

  13. webpack-dev-server выдает ошибку при запуске =( Error: Cannot find module 'webpack-cli/bin/config-yargs'

  14. Доходчиво !) ждем продолжение

  15. отличный курс! очень подробно и доступно! приятно слушать, один из немногих обучающих видео, под которые не хочется спать )))) успехов!

  16. Я не смог повторить вот эту тему:
    52:51 Генерация HTML …

    Просто выводится страница без обработки скриптом…. Как найти причину?

  17. На 33:40 — непонятно в каком режиме должен работать WebPack.. То ли в режиме "продакшен", то ли в режиме "develop"? Можно ли об этом поподробнее?!…

  18. Французское вуаля это хорошо, а древнеславянская мантра У-Ра ещё лучше. Спасибо за полезную информацию. Удачи и продолжения!

  19. Хороший конечно урок, но хоть убейте — не подключается module.exports = {

    entry: './test.js'

    } на 38 минуте

  20. По андроид СДК будут уроки ?

  21. Отличное видео, но я не понял одну вещь : как открыть браузер в окне справа, для отображение результата изменение кода, в Visual Studio Code, как это сделал
    DKA-DEVELOP?

  22. Это видео было посложнее остальных, так как знакомство было впервые. В другом месте говорилось, что webpack самый сложный из сборщиков. Я пыталась понять gulp, я его вроде и понимала, но не совсем, составлять под нужный мне проект, отбирать нужное, это для меня было сложновато. Я набрала много проектов с разными gulpfile.js и пыталась понять чем они отличаются, почему в одних код написан так, а в других по другому, искала отличия и пыталась запомнить что за что отвечает. Но так как у меня до ваших обучающих уроков было совсем маленькое представление об JS об объектах, функциях и других элементарных вещах, полностью понять и научиться составлять под разные проекты по своему, мне было сложновато. Думаю, что сейчас если попробовать, то всё получиться. А с webpack знакомиться даже не собиралась, но так как 1 уровень понравился, решила просмотреть и второй. По вашим урокам, он мне показался не сложнее gulp. Конечно я многое ещё не знаю, но начальное представление о нём уже сложилось, благодаря этому видео и знаю где можно почитать и ознакомиться более детально при желании, жаль только что не всё на знакомом мне языке, а переводчик иногда не совсем понятно переводит.
    Ещё раз спасибо за уроки! Буду пробовать и 3 уровень просматривать, хоть не знаю понадобиться ли мне всё это в дальнейшем. Но изучать по вашим видео мне нравиться, выполнять и видеть, что у меня всё получается также как и у вас. А вот по другим видео урокам, не всегда выходило гладко, в консоле часто ошибки были и я не знала просто что мне с ними делать и как их устранять. А вы ещё и учите как их решать, как общаться с консолью в живую, показываете из-за чего они могут возникнуть и это мне очень нравиться.

  23. "test": "echo "Error: no test specified" && exit 1"

    "build": "webpack"
    Не могу прописать build, выдает ошибку на — test. в чем причина?

  24. Спасибо! Добавил видео к себе в плейлист. Чтобы долго не искать при необходимости:)

  25. Спасибо!!! А продолжение будет?

  26. почему все так сложно???!!!! все желание отбивает

  27. Привіт, класна подача матеріалу. Всі відоси пролайкав і звиайно підписка. Але є питання — я якраз вивчаю зараз JS, твої відоси заходять на ура — вроді поав хоть трохи розуміти. А є продовження даного курсу ?

  28. Обычно комментарии не пишу, просмотрев весь курс по js, начал по node.js , и не могу не написать о том, как же круто ты подаешь информацию. Большое спасибо за твой труд!
    (подписался совсем недавно)

  29. Question : Эти плагины (npm … ) что мы устанавливали в VScode они разовые только на 1 проект или они постоянные, раз установил и будут в программе постоянно?

  30. Очень приятно просматривать такие ролики! Причём, даже с учётом, что разработчик далеко не начинающий — разжёвывание тривиальных вещей не напрягает, абсолютно.
    Вопрос, программирование — только веб?
    Не планируешь ли что-нибудь по тренду мобильной разработки?
    Flutter, например. Ну или смежную тему — PWA

  31. я одно вот понять не могу…ради того чтобы написать пару тегов надо было все это проделать.???
    не проше и быстрее было все это сделать версткой???
    и в чем отличие вестки от такого метода???

Написать отзыв