Webpack 5 - Полный курс для начинающих. Обработка html, css, scss, js, image compress.

[@my.methed]

Описание работы 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 для более простых проектах?

[@Дмитрий-л4с9х]

Отличное видео. Лучшее из того, что удалось найти на KZbin. Не хватало именно такого объяснения: пошагового, для человека с 0 опытом использования Webpack. Единственное видео, после которого стало более или менее понятно что, куда, для чего. Спасибо большое!🤝

[@my.methed]

Спасибо большое!

[@AloneInThisWorld.]

Из того что видел на ютубе, это самый адекватный материал по настройке для начальных проектов👍 Все что нужно, спасибо)

[@my.methed]

Спасибо )

[@rabopuk]

Приятное открытие вчера совершил, зайдя именно на это видео среди кучи других про вебпак, где в каком-нибудь моменте всё разваливалось. На мой взгляд 'ученика' - подача супер, очень доступно объясняет, воды ноль, видно, что автор прям шарит, подмечаешь у него фишечки, которых раньше не встречал в коде) И ещё: Мне было реально интересно параллельно с автором своими ручками писать конфиг своего первого вебпака! И я не слепо перепечатывал, а в целом, благодаря автору, понял концепцию вебпака и как важна и полезна эта штуковина и примерно как всё это устроено) И ВСЁ СОБРАЛОСЬ И РАБОТАЕТ!!!! Здесь незаслуженно мало просмотров! Автор добавляется в список моих учителей, рядом с Sorax, Ulbi TV, AlekOS, Владиленом, Пузанковым, webDev, Фрилансером по жизни и ещё парой имён, которые находу не вспомню)

[@my.methed]

Спасибо )

[@angrymakc7012]

Отлично, наконец-то удалось найти видео, где у меня тоже все работало при повторении. Были отдельные моменты, но, оказалось, что сам неправильно записал. Теперь есть представление что это и как с этим работать. Спасибо.

[@aiatiiazalieva2148]

Огромное спасибо, Максим ! Очень хорошо объяснил. У меня наконец то заработал Webpack !

[@АннаСтефанович-с7е]

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

[@my.methed]

Спасибо )

[@pintofale]

Спасибо вам огромное! Это и вправду первое видео про webpack, которое я понял.

[@VIJana79]

Большое спасибо за видео. Спасибо за тайм-лист, за ссылку на полную сборку. Отдельно хочу отметить спокойное повествование без суеты и лишней болтовни.👍

[@my.methed]

Спасибо )

[@tawiasmajero1519]

Видео просто супер, очень емкое, все по существу без лишней воды! Спасибо!

[@igorponomarev9652]

Это лучшее видео по настройке Webpack! Спасибо автору за труды!

[@my.methed]

Спасибо 😁

[@ssr.1989]

Спасибо большое за такое информативное видео!!! Решил изучить webpack и целый день смотрел и писал сам весь код, чтобы лучше вникнуть. Да и конспектировал заодно. Видео часовое, а детальное изучение и просмотр заняло почти пять часов. Дальше легче должно быть!

[@SoltonAnna]

Лучший курс по этой теме, долго искала видео, где описываются все нужные настройки, и вот нашла, спасибо большое!!!!

[@Сергей-ю4ж2х]

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

[@АлексКрылов-з3ч]

Спасибо, мое понимание wp стало заметно лучше)

[@zowezy1414]

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

[@my.methed]

Спасибо 😊

[@ОксанаКовш-ъ8т]

спасібо на добром слове, ребяткі! все доступно і понятно! 😘😘😘

[@KirillDejar]

Всё ещё самая простая и понятная инструкция по вебпаку! Есть правда уже устаревшие моменты - лоадер для картинок image-webpack-loader устарел и не поддерживается, вместо него рекомендуется использовать image-minimizer-webpack-plugin, а там документация не самая понятная)

[@ziglobe5639]

Спасибо за видео! Предельно понятно и просто

[@my.methed]

Спасибо 😏

[@waltboulever5199]

Контент, достойный внимания и уважения!

[@СветланаДенисова-г9о]

Спасибо огромное, страшный зверь стал немного понятнее.😊 Теперь ещё сюда три белых коня еслинт, притиер и хаски и начало любого проекта уже есть. Спасибо за такой подробный разбор.🎉

[@my.methed]

Хаски чтобы запускал проверки? Или еще для чего? Я привык что у меня редактор настроен так чтобы ошибки сразу видел, но согласен что если проект делаешь командой, то такой набор будет полезен и если проект большой

[@doremirex]

Спасибо за видео, очень полезно. Очень понравилось ваше повествование, спокойное и неторопливое и без отвлекающих шуточек👍 То что нужно! Продолжайте!

[@JavaScriptcher]

Материал огонь, давно хотел webpack настроить

[@my.methed]

Спасибо )

[@dthrt]

[43:04] - Удобно? Супер удобно!))))) Спасибо за урок! 🔥

[@СергейАрхангельский-н2л]

Сорян, но в документации к полифилу сказато, что начиная с бэйбла 7.4.0 он устарел в пользу прямого включения core-js/stable😁. А вообще спасибо вам большое за труды. Очень хорошо и понятно всё объясняете.

[@TwinkleChanel]

Спасибо большое! Лайк, подписка! Реально очень хороший урок! Давай теперь под React еще сборку :) Буду чрезмерно признателен и благодарен, думаю как и многие!

[@СергейОсадчий-и5е]

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

[@BOIH_CBETA]

Братан молодец, купил курс html css полгода назад, вот теперь закрываю дыры от пройденного материала на твоём бесплатном ресурсе

[@АлексейОлейник-у7в]

Тысячекратно благодарю вас за такой труд!

[@my.methed]

Спасибо большое!

[@kostyahellcat2081]

Большое спасибо за подробный и качественный гайд! Даже на бескрайних просторах гугла ничего подобного не нашел

[@duoduoo6732]

ничего лишнего супер. на скорости 1.5 смотрел советую.

[@alexsavchenko1590]

Странно, но почему-то очень сложно найти актуальный и адекватный урок по webpack 5, спасибо!

[@v.demchenko]

Браво, приятно слушать. Все детально обьяснил.

[@Blood-Saw]

очень понравилось! Теперь буду искать подключение react/vue

[@andrewdefould1453]

Спасибо за видео! У меня была интересная ошибка, когда я писал "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';, после этого заработало

[@pervertedhero7438]

Спасибо за видео , все заработало ! Хотелось бы от вас видео как дальше настроить Webpack под реакт и тайпскрипт)

[@my.methed]

Спасибо 😊

[@burunduckc]

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

[@Djuslun]

Спасибо за урок. Все понятно и доходчиво объяснили) Было бы неплохо видео по сборке webpack многостраничного сайта, как правильно настроить сборку нескольких страниц. Успехов в развитии канала)

[@koreikin]

Спасибо большое за работу и такое полезное видео, подписка, лайк. Буду ожидать бурное развития канала благодаря таким полезным видео.

[@my.methed]

Спасибо

[@Vasiliy_Bublikoff]

Спасибо большое!!! Надеюсь что скоро будет сборка для не для начинающих!)

[@my.methed]

Для не начинающих, я думаю уже особо это не нужно или берутся готовые сборки чуть подшаманивают ребята для себя. Но обновим сборку когда придет время. Важно что под видео ссылка на актуальную версию!

[@Mr.Bellamy]

MiniCssExtractPlugin.loader вроде вполне заменяет style-loader при разработке тоже. Или есть различия в работе, чтобы их юзать вместе в зависимости от режима разработки?

[@ЯнаАлександровна-э7к]

Большое спасибо за видео! Всё очень наглядно, спокойно, обстоятельно, без суеты. Много полезного)

[@blaizxd1019]

41:10 что нужно нажать что бы из минифицированного кода получился читаемый?) Спасибо!

[@Екатерина-ф1ю1й]

Супер, лучше быть не может! Спасибо огромное!!!

[@andyanatolich]

Спасибо большое за полезный урок! Вопрос: Как сделать так, чтобы стили, картинки и прочее было распределено по соответствующим папкам (т.е папка css, папка images). В видео все эти файлы, если я правильно понял, находятся просто в папках src и dist, а внутри никак не организованы? Как их организовать?

[@VugarM-g9y]

просто супер, есть только один вопрос, теперь скрипты подключаются в хедере, а не в конце страницы, это нормально разве?

[@evgeniykolmak5459]

не могу понять, как самая начальная сборка могла собраться в dist если конфига нет никакого. просто после установки зависимостей и написания скриптов

[@ssr.1989]

Возник вопрос: как загружать видео разных форматов? Их также, как и изображения грузить?

[@sashadev86]

Доброго времени суток Максим!!! ОГРОМНОЕ СПАСИБО!!!! Всё спокойно, просто и главное понятно новичку!!! Хотелось бы в вашем исполнении сборку о которой говорите в конце! Думаю будет не плохо для канала! Вам желаю развития и просто человеческого счастья! Мир вам! 😊😊😊

[@0percot926]

Приветствую, как настроить svg спрайты в webpack?

[@ВоваКаминский-н1л]

Круто, Макс! Ждём!!!

[@artemsergeev4833]

Круто получилось. спасибо за работу!

[@nightdreams5521]

Большое спасибо за видео! В первый раз полез настраивать вебпак и судя по остальным комментариям аналогов этому руководству практически нет. Хотя по подаче материала сразу видно сильного специалиста. Хотелось бы еще увидеть внедрение TS.

[@АндрейНовицкий-т9е]

Здравствуйте! Спасибо за видео, нашел почти все ответы. Мне не хватило информации как подключать JQuery, eslinter и как использовать Tree Shaking. А так же мне очень понравилась настройка вашего vc code - возможно у вас есть видео о том как настроить vc code? Буду очень признателен если поделитесь своими настройками vc code

[@VERONIKAGACHA]

Урок супер👍

[@NightPilgrim-ti8ho]

Спасибо за урок по webpack. А как быть, если необходимо подключать на разных страницах, разные css и js?

[@my.methed]

В основном в этом нет смысла, так как css и js хешируются, лучше один файл подключать. Но можно использовать динамический импорт. Это не касается темы webpack

[@bushdog7439]

👍 Спасибо. Очень полезно!!!

[@g00d-man]

Спасибо, но хотелось чтобы вы сняли ещё видео, т.к. очень познавательно. Кроме того ещё, мало освещены вопросы по работе со шрифтами, как сделать чтобы при экспорте шрифт сразу конвертировался из формата TTF в формат woff и woff2

[@my.methed]

Спасибо, учтем в следующих видео.)

[@UCnBUnAmcvCs8FePEtmn]

@@my.methed снимите пожалуйста, супер полезно) Еще хотелось бы понять как использовать иконочные шрифты, например icomoon свои загружаемые

[@nnnabbot]

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

[@ВадимДудко-т6й]

Супер сборка!

[@МаксимИсаев-ъ5о]

Мое глубочайшее почтение!

[@lombrozomir]

Подскажите пожалуйста. Когда я подключил к репозиторю гитхаб, а так же к GitHub Pages этот проект, то он просто не отображается. Открываю пэйдж и он просто пустой с названием репозитория и полоской. В чем может быть проблема, подскажите пожалуйста.

[@denispanteleev6110]

Можете подсказать, что нужно, чтобы json файл например закидывало в dist?(json нужен для асинхронной функции).

[@severgun]

Не сказали про очередность работы лоадеров. Почему postcss был вставлен именно в середину.

[@maxim.saharov]

47:02 Максим, а как понять это «As of Babel 7.4.0, this package has been deprecated» - и что они тут пишут?) и что за версия 7.4.0 - это версия какого именно бейбла ? потому что последняя версия babel гитхабе 7.19.0. В общем вопрос в том - а точно нужно ли ставить @babel/polyfill в dependencies, а типо уже это устарело и куда то они включили уже все что тут, если я правильно понял. А если загуглить такое «Babel 7.4.0» - то есть статья на их сайте что такая версия вышло в марте 2019 года. Я просто где то читал что по возможности не нужно сувать лишнее в dependencies а то типо чем больше всего тем больше дыр)

[@my.methed]

webpack babel не опасны, используйте свежие версии

[@w0x3rrr81]

Не могу понять почему у меня в проекте не все svg переносятся в папку dist.В чем может быть причина?

[@ЮрийГерманович-д1р]

Спасибо за видео! Очень информативно

[@Михаил-х4л9п]

Отличное видео. Подскажите, как сделать так, чтобы файл js собирался из нескольких js-файлов в один? Плюс указать порядок файлов. И чтобы код между собой работал.

[@my.methed]

У вас будет собираться один файл js, используйте модули es6 import export

[@w_taurn]

Все прекрасно. Есть один вопрос. Хочу использовать с данными настройка в новом проекте как это лучше реализовать что бы заново все не настраивать. Если перенести папку, то там версии плагинов старые, а хотелось что бы все было актуально. Не ужели надо все заново устанавливать или есть иной способ?

[@lygatastra4633]

почему-то ошибка происходит после запуска сервера как у вас на 21:16 минуте. показывает [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.

[@СеменПирогов-з6л]

Почему появилась функция на 9:50 ? И почему build dev вдруг начал работать?

[@RefuelTheRocket]

что за расширение, которое позволяет так подсвечивать блоки {}?

[@dmitry_gurinovich]

лучшее объяснение! спасибо!

[@АлексейОлейник-у7в]

Здравствуй! Подскажи, как в твой конфиг добавить плагин для svg спрайтов?

[@my.methed]

Попробуйте svg-sprite-loader

[@СергейБабанов-г7и]

Все работает. Хорошее видео.

[@my.methed]

Спасибо )

[@write-code]

На 15:41 Вы создаете переменную mode. И говорите, что "NODE_ENV мы создали ранее". Я так понял создали мы, её когда прописывали скрипты в файле packaje.json (9 строка) Верно?

[@АлександрБелов-ь9ю]

расскажи как сделать Tree shaking в webpack5

[@Edgar-pu1lc]

Привет, для того чтобы взять конфиг, нужно всего лишь скачать файл и написать npm install ?

[@dimendroider7550]

Классная обучалака! Спасибо!!!!

[@my.methed]

Спасибо

[@karenpetrosyan1972]

спасибо за хороший урок

[@kapitankrolick]

спасибо за видео, для начинающих самое то, очень доступно всё. Не подскажете плагин для конвертирования шрифтов в разные форматы?

[@christianspace9700]

Большое спасибо! Подача хорошая, очень информативно, и просто о сложном для начинающих. Собрал конечно же своими руками, так приходит больше понимания, чем просто копируя чужие работы. И теперь кроме gulp, у меня будет еще и webpack сборщик. Хотелось бы видеть дополнение к данной сборке, про React и TypeScript, думаю многим будет полезно!

[@danielluko7635]

А зачем Gulp если есть WebPack? Ведь он выполняет тоже-самое и ещё больше чем gulp

[@servera-center]

@@danielluko7635 Он не может автоматом как gulp подключить шрифты мелкий пример, что не может webpack в отличие от gulp))

[@aleksandrkozowski9717]

Очень хороший гайд

[@ЛеонидДемьянов-в9ю]

Вы недавно добавили group-css-media-queries-loader это для чего?

[@my.methed]

Для того чтобы группировать и собирать все медиа в конце css файла

[@knowledge9396]

Хотелось бы поинтересоваться. Возможно, Вам известен какой либо способ организации HTML файлов, в сборке реализованной на Webpack, подобный тому, что применяется в Gulp сборке с помощью плагина gulp-file-include. Проще говоря, речь идет о разделении одного большого HTML фала, на несколько маленьких фрагментов, с целью последующего включения в какой либо другой, общий документ.

[@my.methed]

Можно воспользоваться шаблонизатором Handlebars или EJS, он позволяет вставлять фрагменты из других html файлов. {{ include './partials/header.html' }}

[@knowledge9396]

@@my.methed Спасибо за Ваш ответ.

[@Maxi-Ferro]

Подскажите плиз чем лучше делать конвертирование файлов .img в формат .web в webpack 5?

[@Bicus_]

Отличное видео, спасибо! Но есть вопрос: допустим что имеется папка с кучей изображений. Но которое из этих изображений использовать решается функцией. Как тогда webpack заставить импортировать именно все изображения? Прописывать их все в import? чтобы webpack явно их увидел?

[@UCnBUnAmcvCs8FePEtmn]

Спасибо. Хочется еще сделать конвертацию шрифтов, использование иконочных шрифтов тоже осветить бы. Кто шарит, дайте направление куда копать пж

[@my.methed]

Иконочные шрифты не советую использовать, на них действуют правила шрифтов, а это значит что в разных ОС может отображаться по-разному. Вес таких шрифтов большой, я рекомендую svg использовать. А конвертацию можно сделать fontfacegen-webpack-plugin Правда лучше найти готовый woff2 и woff

[@dg_avdeev]

Спасибо за видео! Есть вопрос) Для кроссплатформенности не обязательно юзать плагин cross-env?

[@my.methed]

Я им не пользуюсь, на windows и linux все ок

[@Vladimir-yh2dl]

спасибо за классный урок !

[@arcanaarcadevna]

спасибо за урок! подскажите, если я для следующего проекта просто скопирую данный конфиг и файл джейсон, все пакеты всё равно дополнительно ведь устанавливать надо или оно там уже само всё работать будет?

[@my.methed]

Вы можете скачать сборку по ссылке под видео, после запускаете npm install и у вас все пакеты устанавливаются и можно начинать разработку

[@oleksandrlitash1751]

спасиб за такой курс, поставил вместо вашего оптимайзера картинок другой image-minimizer-webpack-plugin, он есть в доке вебпака, потому что на вашем уже лезли ошибки в npm(

[@oleksandrlitash1751]

ну и полифил не ставил, вроде и так все гуд работает :)

[@vladimirsabaev]

Добрый день, у меня не работало автообновление стилей, приходилось обновлять страницу вручную и целиком, добавил в devServer свойство static и все заработало devServer: { static: path.resolve(__dirname, "src"), port: 3000, open: true, hot: true, },

[@dimalukashenko4865]

Крутое видео, спасибо за труд!

[@ДанилаАветисян-л5ю]

Спасибо, было очень полезно!

[@santeya8257]

Большое спасибо за видео, очень помогает. Вопрос по html-loader для автоматического обновления страницы. Если использовать live-server вроде получается то же самое, или есть разница?

[@my.methed]

live-server вы привязываетесь к vsCode, а так вы работаете с webpack и независимо от редактора кода у вас все будет рабтать. Так же бывают изменения в коде которые не требуют перезагрузки страницы, например вы просто код отформатировали, в этом случае webpack не будет обновлять страницу, так как изенений у вас по сути в итоговой версии нет, live-server обновляет при любом изменении, даже при добавлении пробела

[@Mr.Bellamy]

live server не будет на лету ничего конвертить, например scss. После любого даже крохотного изменения тебе придется пересобирать проект, чтобы увидеть изменения в браузере.

[@v_ITshnik]

Видео очень кстати 👍 Лайк 🔥

[@my.methed]

Спасибо )

[@pashasch]

Спасибо, довольно понятно но было бы круто по основные настройки еще добавить. В галпе все однотипно настраивается, а тут видимо какая-то своя специфика для каждого лоадера. Еще мне для использования не хватает конвертера изибражений в webp и сборщика svg спрайта - это возможно сделать в вебпаке?

[@chtotutunas432]

Супер!

[@РусланА-ф2н]

Огромное спасибо