Описание работы 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 для более простых проектах?
@tawiasmajero1519
Ай бұрын
Видео просто супер, очень емкое, все по существу без лишней воды! Спасибо!
@aiatiiazalieva2148
4 күн бұрын
Огромное спасибо, Максим ! Очень хорошо объяснил. У меня наконец то заработал Webpack !
@AloneInThisWorld.
2 жыл бұрын
Из того что видел на ютубе, это самый адекватный материал по настройке для начальных проектов👍 Все что нужно, спасибо)
@my.methed
2 жыл бұрын
Спасибо )
@pintofale
Ай бұрын
Спасибо вам огромное! Это и вправду первое видео про webpack, которое я понял.
@rabopuk
Жыл бұрын
Приятное открытие вчера совершил, зайдя именно на это видео среди кучи других про вебпак, где в каком-нибудь моменте всё разваливалось. На мой взгляд 'ученика' - подача супер, очень доступно объясняет, воды ноль, видно, что автор прям шарит, подмечаешь у него фишечки, которых раньше не встречал в коде) И ещё: Мне было реально интересно параллельно с автором своими ручками писать конфиг своего первого вебпака! И я не слепо перепечатывал, а в целом, благодаря автору, понял концепцию вебпака и как важна и полезна эта штуковина и примерно как всё это устроено) И ВСЁ СОБРАЛОСЬ И РАБОТАЕТ!!!! Здесь незаслуженно мало просмотров! Автор добавляется в список моих учителей, рядом с Sorax, Ulbi TV, AlekOS, Владиленом, Пузанковым, webDev, Фрилансером по жизни и ещё парой имён, которые находу не вспомню)
@my.methed
Жыл бұрын
Спасибо )
@Дмитрий-л4с9х
Жыл бұрын
Отличное видео. Лучшее из того, что удалось найти на KZitem. Не хватало именно такого объяснения: пошагового, для человека с 0 опытом использования Webpack. Единственное видео, после которого стало более или менее понятно что, куда, для чего. Спасибо большое!🤝
@my.methed
Жыл бұрын
Спасибо большое!
@angrymakc7012
Жыл бұрын
Отлично, наконец-то удалось найти видео, где у меня тоже все работало при повторении. Были отдельные моменты, но, оказалось, что сам неправильно записал. Теперь есть представление что это и как с этим работать. Спасибо.
@VIJana79
2 жыл бұрын
Большое спасибо за видео. Спасибо за тайм-лист, за ссылку на полную сборку. Отдельно хочу отметить спокойное повествование без суеты и лишней болтовни.👍
@my.methed
2 жыл бұрын
Спасибо )
@АннаСтефанович-с7е
Жыл бұрын
Самое понятное и адекватное видео на эту тему, после которого все работает!!! Спасибо большое!!!
@my.methed
Жыл бұрын
Спасибо )
@Сергей-ю4ж2х
10 ай бұрын
Редко пишу комментарии, но это как раз тот случай, когда я просто обязан сказать автору СПАСИБО! Идеальная подача материала. Лайк, подписка)
@ssr.1989
7 ай бұрын
Спасибо большое за такое информативное видео!!! Решил изучить webpack и целый день смотрел и писал сам весь код, чтобы лучше вникнуть. Да и конспектировал заодно. Видео часовое, а детальное изучение и просмотр заняло почти пять часов. Дальше легче должно быть!
@СергейАрхангельский-н2л
2 жыл бұрын
Сорян, но в документации к полифилу сказато, что начиная с бэйбла 7.4.0 он устарел в пользу прямого включения core-js/stable😁. А вообще спасибо вам большое за труды. Очень хорошо и понятно всё объясняете.
@SoltonAnna
Жыл бұрын
Лучший курс по этой теме, долго искала видео, где описываются все нужные настройки, и вот нашла, спасибо большое!!!!
@СергейОсадчий-и5е
Ай бұрын
Спасибо огромное за вашу работу, все наглядно и понятно
@igorponomarev9652
Жыл бұрын
Это лучшее видео по настройке Webpack! Спасибо автору за труды!
@my.methed
Жыл бұрын
Спасибо 😁
@ziglobe5639
2 жыл бұрын
Спасибо за видео! Предельно понятно и просто
@my.methed
2 жыл бұрын
Спасибо 😏
@JavaScriptcher
2 жыл бұрын
Материал огонь, давно хотел webpack настроить
@my.methed
2 жыл бұрын
Спасибо )
@TwinkleChanel
Жыл бұрын
Спасибо большое! Лайк, подписка! Реально очень хороший урок! Давай теперь под React еще сборку :) Буду чрезмерно признателен и благодарен, думаю как и многие!
@Djuslun
Жыл бұрын
Спасибо за урок. Все понятно и доходчиво объяснили) Было бы неплохо видео по сборке webpack многостраничного сайта, как правильно настроить сборку нескольких страниц. Успехов в развитии канала)
@KirillDejar
Жыл бұрын
Всё ещё самая простая и понятная инструкция по вебпаку! Есть правда уже устаревшие моменты - лоадер для картинок image-webpack-loader устарел и не поддерживается, вместо него рекомендуется использовать image-minimizer-webpack-plugin, а там документация не самая понятная)
@ОксанаКовш-ъ8т
Жыл бұрын
спасібо на добром слове, ребяткі! все доступно і понятно! 😘😘😘
@BOIH_CBETA
Жыл бұрын
Братан молодец, купил курс html css полгода назад, вот теперь закрываю дыры от пройденного материала на твоём бесплатном ресурсе
@АлексКрылов-з3ч
Жыл бұрын
Спасибо, мое понимание wp стало заметно лучше)
@dthrt
Жыл бұрын
[43:04] - Удобно? Супер удобно!))))) Спасибо за урок! 🔥
@АлексейОлейник-у7в
Жыл бұрын
Тысячекратно благодарю вас за такой труд!
@my.methed
Жыл бұрын
Спасибо большое!
@СветланаДенисова-г9о
6 ай бұрын
Спасибо огромное, страшный зверь стал немного понятнее.😊 Теперь ещё сюда три белых коня еслинт, притиер и хаски и начало любого проекта уже есть. Спасибо за такой подробный разбор.🎉
@my.methed
5 ай бұрын
Хаски чтобы запускал проверки? Или еще для чего? Я привык что у меня редактор настроен так чтобы ошибки сразу видел, но согласен что если проект делаешь командой, то такой набор будет полезен и если проект большой
@doremirex
Жыл бұрын
Спасибо за видео, очень полезно. Очень понравилось ваше повествование, спокойное и неторопливое и без отвлекающих шуточек👍 То что нужно! Продолжайте!
@waltboulever5199
Жыл бұрын
Контент, достойный внимания и уважения!
@koreikin
Жыл бұрын
Спасибо большое за работу и такое полезное видео, подписка, лайк. Буду ожидать бурное развития канала благодаря таким полезным видео.
@my.methed
Жыл бұрын
Спасибо
@burunduckc
Жыл бұрын
Спасибо вам большое за такой прекрасный урок по настройке вебпака! С первого раза почему то не вышло, набрался сил и еще раз все пересмотрел) Вышло просто замечательно, доволен очень сильно!!!!! Успехов вам в дальнейшем развитии канала!
@pervertedhero7438
2 жыл бұрын
Спасибо за видео , все заработало ! Хотелось бы от вас видео как дальше настроить Webpack под реакт и тайпскрипт)
@my.methed
2 жыл бұрын
Спасибо 😊
@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';, после этого заработало
@zowezy1414
2 жыл бұрын
Спасибо большое за курс. Не мог найти нормальное видео, где автор спокойно и без спешки объяснит всё по полочкам. Вы же с этим справились превосходно. Весь материал был понятен в полной мере. Спасибо ещё раз =)
@my.methed
2 жыл бұрын
Спасибо 😊
@kostyahellcat2081
Жыл бұрын
Большое спасибо за подробный и качественный гайд! Даже на бескрайних просторах гугла ничего подобного не нашел
@v.demchenko
11 ай бұрын
Браво, приятно слушать. Все детально обьяснил.
@duoduoo6732
Жыл бұрын
ничего лишнего супер. на скорости 1.5 смотрел советую.
@bushdog7439
Жыл бұрын
👍 Спасибо. Очень полезно!!!
@ЯнаАлександровна-э7к
Жыл бұрын
Большое спасибо за видео! Всё очень наглядно, спокойно, обстоятельно, без суеты. Много полезного)
@ВоваКаминский-н1л
2 жыл бұрын
Круто, Макс! Ждём!!!
@artemsergeev4833
Жыл бұрын
Круто получилось. спасибо за работу!
@Blood-Saw
Жыл бұрын
очень понравилось! Теперь буду искать подключение react/vue
@Екатерина-ф1ю1й
Жыл бұрын
Супер, лучше быть не может! Спасибо огромное!!!
@nightdreams5521
Жыл бұрын
Большое спасибо за видео! В первый раз полез настраивать вебпак и судя по остальным комментариям аналогов этому руководству практически нет. Хотя по подаче материала сразу видно сильного специалиста. Хотелось бы еще увидеть внедрение TS.
@nnnabbot
Жыл бұрын
Спасибо большое за проделанную работу))
@VERONIKAGACHA
Жыл бұрын
Урок супер👍
@g00d-man
Жыл бұрын
Спасибо, но хотелось чтобы вы сняли ещё видео, т.к. очень познавательно. Кроме того ещё, мало освещены вопросы по работе со шрифтами, как сделать чтобы при экспорте шрифт сразу конвертировался из формата TTF в формат woff и woff2
@my.methed
Жыл бұрын
Спасибо, учтем в следующих видео.)
@UCnBUnAmcvCs8FePEtmn
Жыл бұрын
@@my.methed снимите пожалуйста, супер полезно) Еще хотелось бы понять как использовать иконочные шрифты, например icomoon свои загружаемые
@dimendroider7550
2 жыл бұрын
Классная обучалака! Спасибо!!!!
@my.methed
2 жыл бұрын
Спасибо
@evgeniykolmak5459
Жыл бұрын
не могу понять, как самая начальная сборка могла собраться в dist если конфига нет никакого. просто после установки зависимостей и написания скриптов
@UCnBUnAmcvCs8FePEtmn
Жыл бұрын
Спасибо. Хочется еще сделать конвертацию шрифтов, использование иконочных шрифтов тоже осветить бы. Кто шарит, дайте направление куда копать пж
@my.methed
Жыл бұрын
Иконочные шрифты не советую использовать, на них действуют правила шрифтов, а это значит что в разных ОС может отображаться по-разному. Вес таких шрифтов большой, я рекомендую svg использовать. А конвертацию можно сделать fontfacegen-webpack-plugin Правда лучше найти готовый woff2 и woff
@ЮрийГерманович-д1р
Жыл бұрын
Спасибо за видео! Очень информативно
@МаксимИсаев-ъ5о
Жыл бұрын
Мое глубочайшее почтение!
@СергейБабанов-г7и
Жыл бұрын
Все работает. Хорошее видео.
@my.methed
Жыл бұрын
Спасибо )
@nikogen
Жыл бұрын
У кого ошибка "Error: Unknown option '--node-env-production'": "build-dev": "npx webpack --mode development", "build-prod": "npx webpack --mode production",
@my.methed
Жыл бұрын
Скачайте версию с github там все настроено и даже обновлено
@karenpetrosyan1972
Жыл бұрын
спасибо за хороший урок
@dmitry_gurinovich
Жыл бұрын
лучшее объяснение! спасибо!
@aleksandrkozowski9717
10 ай бұрын
Очень хороший гайд
@ДанилаАветисян-л5ю
2 жыл бұрын
Спасибо, было очень полезно!
@dimalukashenko4865
Жыл бұрын
Крутое видео, спасибо за труд!
@Vladimir-yh2dl
Жыл бұрын
спасибо за классный урок !
@РусланА-ф2н
2 жыл бұрын
Огромное спасибо
@gomuncool1004
Жыл бұрын
RS school дарова
@davidoff1727
Жыл бұрын
clear: "rm -r -f dist" для мака
@chtotutunas432
Жыл бұрын
Супер!
@aquinary.
Жыл бұрын
1:51 тысячи часов увлекательного геймплея в игре "nodejs")
@my.methed
Жыл бұрын
Если не больше =)
@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.
@lamthat
2 жыл бұрын
Спасибо, очень информативно и полезно. Но, насколько же меньше возни и проще с Parcel при том же результате...
@blaizxd1019
Жыл бұрын
41:10 что нужно нажать что бы из минифицированного кода получился читаемый?) Спасибо!
@oleksandrlitash1751
Жыл бұрын
спасиб за такой курс, поставил вместо вашего оптимайзера картинок другой image-minimizer-webpack-plugin, он есть в доке вебпака, потому что на вашем уже лезли ошибки в npm(
@oleksandrlitash1751
Жыл бұрын
ну и полифил не ставил, вроде и так все гуд работает :)
@ЛеонидДемьянов-в9ю
2 жыл бұрын
Впервые увидел чтобы в js импортировали html, для обновления страницы.
@АндрейНовицкий-т9е
10 ай бұрын
Здравствуйте! Спасибо за видео, нашел почти все ответы. Мне не хватило информации как подключать JQuery, eslinter и как использовать Tree Shaking. А так же мне очень понравилась настройка вашего vc code - возможно у вас есть видео о том как настроить vc code? Буду очень признателен если поделитесь своими настройками vc code
@ТОЛЬКОПОБЕЗДОРОЖЬЮ
9 ай бұрын
Супер
@knowledge9396
6 ай бұрын
Хотелось бы поинтересоваться. Возможно, Вам известен какой либо способ организации HTML файлов, в сборке реализованной на Webpack, подобный тому, что применяется в Gulp сборке с помощью плагина gulp-file-include. Проще говоря, речь идет о разделении одного большого HTML фала, на несколько маленьких фрагментов, с целью последующего включения в какой либо другой, общий документ.
@my.methed
5 ай бұрын
Можно воспользоваться шаблонизатором Handlebars или EJS, он позволяет вставлять фрагменты из других html файлов. {{ include './partials/header.html' }}
@knowledge9396
5 ай бұрын
@@my.methed Спасибо за Ваш ответ.
@ProgrammerFlunt
Жыл бұрын
спасибо
@ЖеняХижняк-д9т
10 ай бұрын
Дядь, топчик) а зробиш відосік як добавить сюди ж реакт?
@andrewshalomitsky2184
Жыл бұрын
круто)
@maxim.saharov
2 жыл бұрын
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
2 жыл бұрын
webpack babel не опасны, используйте свежие версии
@АлександрБелов-ь9ю
Ай бұрын
расскажи как сделать Tree shaking в webpack5
@szCerber
Жыл бұрын
На момент написания посте не сетился NODE_ENV: Было : "start": "set NODE_ENV=development&&webpack serve", "build:dev": "set NODE_ENV=development&&webpack", "build:prod": "set NODE_ENV=production&&webpack", Изменил, что бы работало на: "start": "NODE_ENV=development webpack serve", "build:dev": "NODE_ENV=development webpack", "build:prod": "NODE_ENV=production webpack", В остальном работает как на видео все, ос ubutnu 22.04, node v16.15.1
@my.methed
Жыл бұрын
Да есть особенности для команд в node в разных операционных системах
@oleksandrlitash1751
Жыл бұрын
@@my.methed работает, спасиб
@0percot926
Ай бұрын
Приветствую, как настроить svg спрайты в webpack?
@VakiTaki
Жыл бұрын
спс
@ssr.1989
7 ай бұрын
Возник вопрос: как загружать видео разных форматов? Их также, как и изображения грузить?
@Mr.Bellamy
Жыл бұрын
MiniCssExtractPlugin.loader вроде вполне заменяет style-loader при разработке тоже. Или есть различия в работе, чтобы их юзать вместе в зависимости от режима разработки?
@darkcasper1488
Жыл бұрын
как в том самом меме. "очень интересно, но ничего не понятно" )))
@w0x3rrr81
3 ай бұрын
Не могу понять почему у меня в проекте не все svg переносятся в папку dist.В чем может быть причина?
@igormajrov8444
Жыл бұрын
ESLint, Stylelint, SVG sprite еще бы)))
@my.methed
Жыл бұрын
ESLint можно, конечно, но его необязательно в webpack добавлять, а svg-sprite хорошая идея
@kapitankrolick
Жыл бұрын
спасибо за видео, для начинающих самое то, очень доступно всё. Не подскажете плагин для конвертирования шрифтов в разные форматы?
@severgun
Жыл бұрын
Не сказали про очередность работы лоадеров. Почему postcss был вставлен именно в середину.
@АлександрМелянюк-ц9ю
2 жыл бұрын
Спасибо! Подписка, колокол)
@my.methed
2 жыл бұрын
Спасибо )
@Мишаня-х1я
2 жыл бұрын
запись останется да? очень хочу, но в данный момент времени нет...
@my.methed
2 жыл бұрын
Да конечно, видео доступно
@81n90
2 жыл бұрын
Чел, ты хотя бы людям рассказал что нужно установить хотя бы npm script runner или что то вроде него, ну и в остальном множество недоработок. На настроенной машине конечно все будет работать. Так то для новичка это отличное было бы видео - ведь сам используешь vscode - покажи людям как настроить - там плагинов очень много и далеко не все подходят. Но есть основные - вот например как у тебя иконки показаны - новичек заходит - и не понимает - почему у него такой интерфейс, а у тебя другой. Эти детали могут поставить начинающего легко в тупик. И не плохо было бы показать как получить на выходе чистые js скрипты - без кучи мусора. Тут ведь не нода, вью или реакт - простейшие вещи, что бы было понятно. В целом и общем - конечно же лайк! Молодца!
@МаксимЛескин-ч6в
2 жыл бұрын
Привет, спасибо! npm script runner не обязательно ставить, больше скажу его и нет у меня Настройка VSCode к webpack не относится, по VSCode есть отдельное видео на канале по установке плагинов
@81n90
2 жыл бұрын
@@МаксимЛескин-ч6в если не ставить npm script runner или другой плагин для npm, то по дефолту в vscode вы не увидите вкладку npm scripts
@my.methed
2 жыл бұрын
Она по умолчанию в редакторе, если есть файл package.json то редактор его просканирует и появляется эта вкладка, можно её включить тут joxi.ru/LmG1QvvhZ6nVeA
@ВиталийЛитвин-ц5й
2 жыл бұрын
Чел, а ты пробовал голову включать? он вроде никому ничем не обязан, хочешь - учись, какой "новичок" полезет в вебпак? или ты робенгуд? ЧЕЛ.... блять)
@indexzet
Жыл бұрын
@@my.methed ну вот хорошо что написали - не мог понять почему у меня не отображается эта вкладка
@Михаил-х4л9п
2 жыл бұрын
Отличное видео. Подскажите, как сделать так, чтобы файл js собирался из нескольких js-файлов в один? Плюс указать порядок файлов. И чтобы код между собой работал.
@my.methed
2 жыл бұрын
У вас будет собираться один файл js, используйте модули es6 import export
@NightPilgrim-ti8ho
7 ай бұрын
Спасибо за урок по webpack. А как быть, если необходимо подключать на разных страницах, разные css и js?
@my.methed
7 ай бұрын
В основном в этом нет смысла, так как css и js хешируются, лучше один файл подключать. Но можно использовать динамический импорт. Это не касается темы webpack
@VIJana79
2 жыл бұрын
странно, что на github так мало скачиваний данного материала, может потому что подписчиков мало.
@write-code
Жыл бұрын
На 15:41 Вы создаете переменную mode. И говорите, что "NODE_ENV мы создали ранее". Я так понял создали мы, её когда прописывали скрипты в файле packaje.json (9 строка) Верно?
@lombrozomir
10 ай бұрын
Подскажите пожалуйста. Когда я подключил к репозиторю гитхаб, а так же к GitHub Pages этот проект, то он просто не отображается. Открываю пэйдж и он просто пустой с названием репозитория и полоской. В чем может быть проблема, подскажите пожалуйста.
@servera-center
10 ай бұрын
Так и не понял, как собрать несколько стр,, не подключаю его нигде)
@VugarM-g9y
Жыл бұрын
просто супер, есть только один вопрос, теперь скрипты подключаются в хедере, а не в конце страницы, это нормально разве?
@servera-center
Жыл бұрын
а как собрать несколько страниц? Или webpack это не может?
@vladimirsabaev
Жыл бұрын
Добрый день, у меня не работало автообновление стилей, приходилось обновлять страницу вручную и целиком, добавил в devServer свойство static и все заработало devServer: { static: path.resolve(__dirname, "src"), port: 3000, open: true, hot: true, },
Пікірлер: 277