Webpack 5 - Полный курс для начинающих. Обработка html, css, scss, js, image compress.
Описание работы Webpack 5, инициализация проекта, установка необходимых пакетов, настройка конфига.
Ссылка на сборку: github.com/maksim-leskin/lear...
Обработка html, css, scss, sass, javascipt, images, fonts.
00:00 Вступление
00:52 Подготовка
04:14 Установка webpack
11:10 Конфиг
19:00 HTML
24:57 Стили
41:56 Сервер
43:36 JS
49:21 Шрифты
55:34 Изображения
01:08:16 Итог
Webpack настройка
Webpack Dev Server
HTML Webpack Plugin
Компиляция scss / sass
CSS и post css
Babel Transpiling
Asset Resource Loaders
Source Maps
nodejs: nodejs.org/
webpack: webpack.js.org/
babel-polyfill: babeljs.io/docs/en/babel-poly...
image-webpack-loader: www.npmjs.com/package/image-w...
👀 Подписаться на канал: bit.ly/3CoaLCL
🌍 Наш сайт: methed.ru/
😃 ВКонтакте: vk.me/methed
✈️ Telegram: t.me/methed_bot
#webpack #js #javascript
Пікірлер: 273
Описание работы Webpack 5, инициализация проекта, установка необходимых пакетов, настройка конфига. Обработка html, css, scss, sass, javascipt, images, fonts. 00:00 Вступление 00:52 Подготовка 04:14 Установка webpack 11:10 Конфиг 19:00 HTML 24:57 Стили 41:56 Сервер 43:36 JS 49:21 Шрифты 55:34 Изображения 01:08:16 Итог Webpack настройка Webpack Dev Server HTML Webpack Plugin Компиляция scss / sass CSS и post css Babel Transpiling Asset Resource Loaders Source Maps nodejs: nodejs.org/ webpack: webpack.js.org/ babel-polyfill: babeljs.io/docs/en/babel-polyfill/ image-webpack-loader: www.npmjs.com/package/image-webpack-loader Ссылка на git: github.com/maksim-leskin/learn-wp #webpack #js #javascript
@NickVoinkov
Жыл бұрын
Есть в планах создать такой же урок по Gulp для более простых проектах?
Супер, лучше быть не может! Спасибо огромное!!!
Круто, Макс! Ждём!!!
Большое спасибо за видео! Всё очень наглядно, спокойно, обстоятельно, без суеты. Много полезного)
Спасибо, мое понимание wp стало заметно лучше)
Браво, приятно слушать. Все детально обьяснил.
Лучший курс по этой теме, долго искала видео, где описываются все нужные настройки, и вот нашла, спасибо большое!!!!
Круто получилось. спасибо за работу!
очень понравилось! Теперь буду искать подключение react/vue
Большое спасибо за подробный и качественный гайд! Даже на бескрайних просторах гугла ничего подобного не нашел
Спасибо большое за проделанную работу))
Спасибо за видео, очень полезно. Очень понравилось ваше повествование, спокойное и неторопливое и без отвлекающих шуточек👍 То что нужно! Продолжайте!
Материал огонь, давно хотел webpack настроить
@my.methed
2 жыл бұрын
Спасибо )
Отлично, наконец-то удалось найти видео, где у меня тоже все работало при повторении. Были отдельные моменты, но, оказалось, что сам неправильно записал. Теперь есть представление что это и как с этим работать. Спасибо.
[43:04] - Удобно? Супер удобно!))))) Спасибо за урок! 🔥
Спасибо за видео! Предельно понятно и просто
@my.methed
2 жыл бұрын
Спасибо 😏
Спасибо вам большое за такой прекрасный урок по настройке вебпака! С первого раза почему то не вышло, набрался сил и еще раз все пересмотрел) Вышло просто замечательно, доволен очень сильно!!!!! Успехов вам в дальнейшем развитии канала!
Доброго времени суток Максим!!! ОГРОМНОЕ СПАСИБО!!!! Всё спокойно, просто и главное понятно новичку!!! Хотелось бы в вашем исполнении сборку о которой говорите в конце! Думаю будет не плохо для канала! Вам желаю развития и просто человеческого счастья! Мир вам! 😊😊😊
Контент, достойный внимания и уважения!
спасібо на добром слове, ребяткі! все доступно і понятно! 😘😘😘
Спасибо за урок. Все понятно и доходчиво объяснили) Было бы неплохо видео по сборке webpack многостраничного сайта, как правильно настроить сборку нескольких страниц. Успехов в развитии канала)
👍 Спасибо. Очень полезно!!!
Это лучшее видео по настройке Webpack! Спасибо автору за труды!
@my.methed
Жыл бұрын
Спасибо 😁
Самое понятное и адекватное видео на эту тему, после которого все работает!!! Спасибо большое!!!
@my.methed
Жыл бұрын
Спасибо )
Спасибо большое! Лайк, подписка! Реально очень хороший урок! Давай теперь под React еще сборку :) Буду чрезмерно признателен и благодарен, думаю как и многие!
Тысячекратно благодарю вас за такой труд!
@my.methed
Жыл бұрын
Спасибо большое!
Супер сборка!
Урок супер👍
Спасибо за видео! Очень информативно
Братан молодец, купил курс html css полгода назад, вот теперь закрываю дыры от пройденного материала на твоём бесплатном ресурсе
Крутое видео, спасибо за труд!
Классная обучалака! Спасибо!!!!
@my.methed
2 жыл бұрын
Спасибо
Редко пишу комментарии, но это как раз тот случай, когда я просто обязан сказать автору СПАСИБО! Идеальная подача материала. Лайк, подписка)
лучшее объяснение! спасибо!
спасибо за классный урок !
Спасибо, было очень полезно!
спасибо за хороший урок
Спасибо большое за такое информативное видео!!! Решил изучить webpack и целый день смотрел и писал сам весь код, чтобы лучше вникнуть. Да и конспектировал заодно. Видео часовое, а детальное изучение и просмотр заняло почти пять часов. Дальше легче должно быть!
ничего лишнего супер. на скорости 1.5 смотрел советую.
Видео очень кстати 👍 Лайк 🔥
@my.methed
2 жыл бұрын
Спасибо )
Спасибо за видео! У меня была интересная ошибка, когда я писал "const devtool = devMode ? 'sourse-map' : 'undefined';"б в консоли была ошибка [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern. Нагуглил, что вместо 'sourse-map', надо писать 'eval-cheap-module-source-map', итоговый вариант переменной должен быть такой - const devtool = devMode ? 'eval-cheap-module-source-map' : 'undefined';, после этого заработало
Странно, но почему-то очень сложно найти актуальный и адекватный урок по webpack 5, спасибо!
Сорян, но в документации к полифилу сказато, что начиная с бэйбла 7.4.0 он устарел в пользу прямого включения core-js/stable😁. А вообще спасибо вам большое за труды. Очень хорошо и понятно всё объясняете.
Спасибо большое за работу и такое полезное видео, подписка, лайк. Буду ожидать бурное развития канала благодаря таким полезным видео.
@my.methed
Жыл бұрын
Спасибо
Мое глубочайшее почтение!
Все работает. Хорошее видео.
@my.methed
Жыл бұрын
Спасибо )
Из того что видел на ютубе, это самый адекватный материал по настройке для начальных проектов👍 Все что нужно, спасибо)
@my.methed
Жыл бұрын
Спасибо )
Спасибо за видео , все заработало ! Хотелось бы от вас видео как дальше настроить Webpack под реакт и тайпскрипт)
@my.methed
Жыл бұрын
Спасибо 😊
Большое спасибо за видео! В первый раз полез настраивать вебпак и судя по остальным комментариям аналогов этому руководству практически нет. Хотя по подаче материала сразу видно сильного специалиста. Хотелось бы еще увидеть внедрение TS.
Большое спасибо за видео. Спасибо за тайм-лист, за ссылку на полную сборку. Отдельно хочу отметить спокойное повествование без суеты и лишней болтовни.👍
@my.methed
Жыл бұрын
Спасибо )
Спасибо большое!!! Надеюсь что скоро будет сборка для не для начинающих!)
@my.methed
Жыл бұрын
Для не начинающих, я думаю уже особо это не нужно или берутся готовые сборки чуть подшаманивают ребята для себя. Но обновим сборку когда придет время. Важно что под видео ссылка на актуальную версию!
Очень хороший гайд
Спасибо большое за курс. Не мог найти нормальное видео, где автор спокойно и без спешки объяснит всё по полочкам. Вы же с этим справились превосходно. Весь материал был понятен в полной мере. Спасибо ещё раз =)
@my.methed
Жыл бұрын
Спасибо 😊
Приятное открытие вчера совершил, зайдя именно на это видео среди кучи других про вебпак, где в каком-нибудь моменте всё разваливалось. На мой взгляд 'ученика' - подача супер, очень доступно объясняет, воды ноль, видно, что автор прям шарит, подмечаешь у него фишечки, которых раньше не встречал в коде) И ещё: Мне было реально интересно параллельно с автором своими ручками писать конфиг своего первого вебпака! И я не слепо перепечатывал, а в целом, благодаря автору, понял концепцию вебпака и как важна и полезна эта штуковина и примерно как всё это устроено) И ВСЁ СОБРАЛОСЬ И РАБОТАЕТ!!!! Здесь незаслуженно мало просмотров! Автор добавляется в список моих учителей, рядом с Sorax, Ulbi TV, AlekOS, Владиленом, Пузанковым, webDev, Фрилансером по жизни и ещё парой имён, которые находу не вспомню)
@my.methed
Жыл бұрын
Спасибо )
Огромное спасибо
Супер!
Всё ещё самая простая и понятная инструкция по вебпаку! Есть правда уже устаревшие моменты - лоадер для картинок image-webpack-loader устарел и не поддерживается, вместо него рекомендуется использовать image-minimizer-webpack-plugin, а там документация не самая понятная)
Спасибо огромное, страшный зверь стал немного понятнее.😊 Теперь ещё сюда три белых коня еслинт, притиер и хаски и начало любого проекта уже есть. Спасибо за такой подробный разбор.🎉
@my.methed
2 ай бұрын
Хаски чтобы запускал проверки? Или еще для чего? Я привык что у меня редактор настроен так чтобы ошибки сразу видел, но согласен что если проект делаешь командой, то такой набор будет полезен и если проект большой
Вчера я не знала, что такое webpack. Благодаря этому видео попробую разобраться. Обновление: за 5 часов разобралась, сама писала и все подключала. Завтра буду пробовать в работе.
@user-kn6no9hz4o
7 ай бұрын
и как? получилось?
Супер
Отличное видео. Лучшее из того, что удалось найти на KZread. Не хватало именно такого объяснения: пошагового, для человека с 0 опытом использования Webpack. Единственное видео, после которого стало более или менее понятно что, куда, для чего. Спасибо большое!🤝
@my.methed
Жыл бұрын
Спасибо большое!
Спасибо
круто)
MiniCssExtractPlugin.loader вроде вполне заменяет style-loader при разработке тоже. Или есть различия в работе, чтобы их юзать вместе в зависимости от режима разработки?
спасибо
Спасибо! Подписка, колокол)
@my.methed
Жыл бұрын
Спасибо )
Подскажите плиз чем лучше делать конвертирование файлов .img в формат .web в webpack 5?
Спасибо большое за полезный урок! Вопрос: Как сделать так, чтобы стили, картинки и прочее было распределено по соответствующим папкам (т.е папка css, папка images). В видео все эти файлы, если я правильно понял, находятся просто в папках src и dist, а внутри никак не организованы? Как их организовать?
спс
Все прекрасно. Есть один вопрос. Хочу использовать с данными настройка в новом проекте как это лучше реализовать что бы заново все не настраивать. Если перенести папку, то там версии плагинов старые, а хотелось что бы все было актуально. Не ужели надо все заново устанавливать или есть иной способ?
спасибо за видео, для начинающих самое то, очень доступно всё. Не подскажете плагин для конвертирования шрифтов в разные форматы?
Спасибо, довольно понятно но было бы круто по основные настройки еще добавить. В галпе все однотипно настраивается, а тут видимо какая-то своя специфика для каждого лоадера. Еще мне для использования не хватает конвертера изибражений в webp и сборщика svg спрайта - это возможно сделать в вебпаке?
41:10 что нужно нажать что бы из минифицированного кода получился читаемый?) Спасибо!
Отличное видео, спасибо! Но есть вопрос: допустим что имеется папка с кучей изображений. Но которое из этих изображений использовать решается функцией. Как тогда webpack заставить импортировать именно все изображения? Прописывать их все в import? чтобы webpack явно их увидел?
Можете подсказать, что нужно, чтобы json файл например закидывало в dist?(json нужен для асинхронной функции).
просто супер, есть только один вопрос, теперь скрипты подключаются в хедере, а не в конце страницы, это нормально разве?
не могу понять, как самая начальная сборка могла собраться в dist если конфига нет никакого. просто после установки зависимостей и написания скриптов
Спасибо, но хотелось чтобы вы сняли ещё видео, т.к. очень познавательно. Кроме того ещё, мало освещены вопросы по работе со шрифтами, как сделать чтобы при экспорте шрифт сразу конвертировался из формата TTF в формат woff и woff2
@my.methed
Жыл бұрын
Спасибо, учтем в следующих видео.)
@UCnBUnAmcvCs8FePEtmn
Жыл бұрын
@@my.methed снимите пожалуйста, супер полезно) Еще хотелось бы понять как использовать иконочные шрифты, например icomoon свои загружаемые
Отличное видео. Подскажите, как сделать так, чтобы файл js собирался из нескольких js-файлов в один? Плюс указать порядок файлов. И чтобы код между собой работал.
@my.methed
Жыл бұрын
У вас будет собираться один файл js, используйте модули es6 import export
Большое спасибо! Подача хорошая, очень информативно, и просто о сложном для начинающих. Собрал конечно же своими руками, так приходит больше понимания, чем просто копируя чужие работы. И теперь кроме gulp, у меня будет еще и webpack сборщик. Хотелось бы видеть дополнение к данной сборке, про React и TypeScript, думаю многим будет полезно!
@danielluko7635
Жыл бұрын
А зачем Gulp если есть WebPack? Ведь он выполняет тоже-самое и ещё больше чем gulp
@user-ke4cy3cl2s
11 ай бұрын
@@danielluko7635 Он не может автоматом как gulp подключить шрифты мелкий пример, что не может webpack в отличие от gulp))
Здравствуйте! Спасибо за видео, нашел почти все ответы. Мне не хватило информации как подключать JQuery, eslinter и как использовать Tree Shaking. А так же мне очень понравилась настройка вашего vc code - возможно у вас есть видео о том как настроить vc code? Буду очень признателен если поделитесь своими настройками vc code
Привет, для того чтобы взять конфиг, нужно всего лишь скачать файл и написать npm install ?
Спасибо, очень информативно и полезно. Но, насколько же меньше возни и проще с Parcel при том же результате...
Спасибо за видео! Есть вопрос) Для кроссплатформенности не обязательно юзать плагин cross-env?
@my.methed
Жыл бұрын
Я им не пользуюсь, на windows и linux все ок
что за расширение, которое позволяет так подсвечивать блоки {}?
спасибо за урок! подскажите, если я для следующего проекта просто скопирую данный конфиг и файл джейсон, все пакеты всё равно дополнительно ведь устанавливать надо или оно там уже само всё работать будет?
@my.methed
Жыл бұрын
Вы можете скачать сборку по ссылке под видео, после запускаете npm install и у вас все пакеты устанавливаются и можно начинать разработку
Спасибо. Хочется еще сделать конвертацию шрифтов, использование иконочных шрифтов тоже осветить бы. Кто шарит, дайте направление куда копать пж
@my.methed
Жыл бұрын
Иконочные шрифты не советую использовать, на них действуют правила шрифтов, а это значит что в разных ОС может отображаться по-разному. Вес таких шрифтов большой, я рекомендую svg использовать. А конвертацию можно сделать fontfacegen-webpack-plugin Правда лучше найти готовый woff2 и woff
Макс, а как можно в вебпаке настроить html-file-include? Хочу например разделять header, footer и т.п на отдельные html файлы и потом их просто инклудить в index.html.
@my.methed
Жыл бұрын
Не использовал, но нашел плагин webpack-html-include-loader Вот таким тегом должен вставлять в верстку кусочки
Большое спасибо за видео, очень помогает. Вопрос по html-loader для автоматического обновления страницы. Если использовать live-server вроде получается то же самое, или есть разница?
@my.methed
Жыл бұрын
live-server вы привязываетесь к vsCode, а так вы работаете с webpack и независимо от редактора кода у вас все будет рабтать. Так же бывают изменения в коде которые не требуют перезагрузки страницы, например вы просто код отформатировали, в этом случае webpack не будет обновлять страницу, так как изенений у вас по сути в итоговой версии нет, live-server обновляет при любом изменении, даже при добавлении пробела
@Mr.Bellamy
Жыл бұрын
live server не будет на лету ничего конвертить, например scss. После любого даже крохотного изменения тебе придется пересобирать проект, чтобы увидеть изменения в браузере.
Не сказали про очередность работы лоадеров. Почему postcss был вставлен именно в середину.
Не подскажешь, каким образом поставить цветовую тему как у тебя в vsc? :)
@my.methed
Жыл бұрын
Посмотрите видео c плагинами для vsCode kzread.info/dash/bejne/jHhh28-IYJfdZ5M.html
На 15:41 Вы создаете переменную mode. И говорите, что "NODE_ENV мы создали ранее". Я так понял создали мы, её когда прописывали скрипты в файле packaje.json (9 строка) Верно?
У кого ошибка "Error: Unknown option '--node-env-production'": "build-dev": "npx webpack --mode development", "build-prod": "npx webpack --mode production",
@my.methed
Жыл бұрын
Скачайте версию с github там все настроено и даже обновлено
Появился вопрос. При запуске сервера, у меня NODE_ENV становится development, хотя при сборке через prod версию NODE_ENV равен production. Команды запуска сервера я брал с вашего git-репозитория. Не могли бы вы подсказать, в чём может быть проблема ? Или же если мы запускаем виртуальный сервер таким образом, то он всегда будет запускаться в режиме development, и тем самым css код будет хранится в теге style
@my.methed
Жыл бұрын
Чтобы собрать css файл используйте build версию При запуске сервера нет смысла собирать css
спасиб за такой курс, поставил вместо вашего оптимайзера картинок другой image-minimizer-webpack-plugin, он есть в доке вебпака, потому что на вашем уже лезли ошибки в npm(
@oleksandrlitash1751
Жыл бұрын
ну и полифил не ставил, вроде и так все гуд работает :)
Возник вопрос: как загружать видео разных форматов? Их также, как и изображения грузить?
Почему появилась функция на 9:50 ? И почему build dev вдруг начал работать?
А что делать если у меня шрифты в svg формате и также картинки в svg? У меня они падают в одну папку с шрифтами
Спасибо за урок по webpack. А как быть, если необходимо подключать на разных страницах, разные css и js?
@my.methed
4 ай бұрын
В основном в этом нет смысла, так как css и js хешируются, лучше один файл подключать. Но можно использовать динамический импорт. Это не касается темы webpack
Здравствуй! Подскажи, как в твой конфиг добавить плагин для svg спрайтов?
@my.methed
Жыл бұрын
Попробуйте svg-sprite-loader