Webpack. Full Course 2020
Vložit
- čas přidán 12. 06. 2024
- Webpack. Full Course 2020
After this video you will learn how to create builds for any projects.
Why course is almost 3 hours? I will tell you about everything in details: babel, typescript, eslint, sass, less, react jsx, hmr, dev server, fonts, images, xml, csv. I will tell you about app optimization with different builds, resolving issue with cache, configuring Webpack for different environments, bundle analyze and best practices
After this video you will no longer have any questions about how frontend is working
Telegram: teleg.one/js_by_vladilen
Instagram: / vladilen.minin
VK: vladilen.minin
Udemy Angular 9:
clc.to/angular
Udemy React Native:
clc.to/rnative
Udemy ReactJS:
clc.to/react
Source code in telegram channel:
teleg.one/js_by_vladilen
Support new videos:
Yandex Money: money.yandex.ru/to/4100137576...
PayPal: www.paypal.me/vladilenm
Webpack. Full Course 2020
#webpack #js #javascript
Исходники тут: t.me/js_by_vladilen/125
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Лучший гайд!!! Ждём обновления под версию 5.
Долго выбирал материал для этого ролика и постарался в нем учесть все ваши пожелания :)
Приятного обучения и просмотра!
Большое спасибо за курс! То, что сейчас нужно.
Владилен, огромное спасибо!!! А вы могли бы добавить таймкоды?
Большое спасибо! Надеюсь всё же дождусь курс от тебя по NgRx и ещё что-нибудь по Angular)))
как обычно, красавчик просто) спасибо огромное). Лайк поставил, к просмотру позже, не успеваю за твоим контентом)
@@user-fx3of4zx6s Спасибо! Сейчас гляну)
У кого возникает проблема с CopyWebpackPlugin - там теперь в plugins нужно писать немного иначе:
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/favicon.ico'),
to: path.resolve(__dirname, 'dist')
}
]
})
Спасибо тебе, добрый человек
Как же подгорает от вебпак мира! Не успел добраться до годного курса, как уже что-то в синтаксисе поменялось.
@@technobydlo6093 по этому документация лучше любых курсов
спосибо
Спасибо! Ваш комментарий очень помог!
Проблема с дублированием файлов (png, fonts).
Вместо use: 'file-loader' используйте type: 'asset/resource' - это нововведение (относительное) Webpack, которое помогает избежать данной ошибки. Подробнее можно узнать в документации Webpack в разделе asset-modules, там все кристально объяснено.
по делу коммент, помог
Супер, спасибо помог!
Святой человек, помог!
@@user-gc2ez7zb1f На небе есть отдельное облако для тех, кто кидает годноту в комментах)))
@@strange_man317 места рядом с типами со стек оверфлоу
Это мой третий подход к Webpack - у ! Оказывается он совсем не такой страшный! Владилен у тебя талант делать сложные вещи простыми!
он вновь становится страшным после каждого braking changes обновления...
это сарказм?
в Webpack 5 теперь нужно немного поправить devtool - вместо пустых кавычек '' подставить false
devtool: isDev ? 'source-map' : false
Спасибо!
Спасибо, помогло!!
Спасибо большое, мне помогло!))
Ты герой современного программирования!
@@ne4to777 У зоракса немного другой подход
Видео просто 11/10. Просмотрел курс за один присест на скорости 2х. Хочу отметить, что у Вас очень четкая речь и на такой скорости я могу прекрасно понимать, что Вы говорите. Спасибо большое!
Лайк не глядя, когда понимаешь, что следующие три часа пройдут офигенно
Приятного просмотра)
поддерживаю!
3*4 если пробовать и изучать
Абсолютно согласна🤩
25:01 Скорее всего у автора также установлен webpack-cli и глобально, иначе бы команда webpack не вызвалась из терминала. Чтобы не ставить webpack-cli глобально, можно запускать команду в виде 'npx webapck' или создать script в package.json, с помощью которого можно буде вызывать локально установленный webpack
а что это даст?
@@olegpristashkin9078 тогда он будет использоваться с директории node_modules/.bin
@Exa1t у меня тоже самое. Кто нибудь нашел решение?
@Exa1t далее когда импорты пропишешь, подхватит
Спасибо за совет, поставил глобально (npm install --global webpack-cli), тогда команда webpack прошла.
25:24 npx webpack так компилируется сейчас
Thank you once more, Vladilen for this awesome tutorial. As I have said in my previous comments, your tutorials are of high value for those who want to learn something new. They stand out with null unnecessary talk and much useful info explained step by step. In this video, it became clear to me how js frameworks(react, vue) work and why are there so many files.
Thank you so much because to sit down and figure out all these things would be really hard for one and you have done it for your auditory.
Подписывайтесь на мой инстаграм: instagram.com/vladilen.minin/
Здравствуйте, с удовольствием смотрю, пишу, повторяю за Вами основы js. Какой курс выбрать ..базовый или есть может что-то попродвинутей?
Марина Гайдукевич jsexcel.ru идеально подойдет
@@NextgenSocialReptile последнее уточнение...Это три блока курса, начиная с базового. 80 тыс руб. Правильно? Увидела полтора месяца, это один блок курса? Сколько по времени длится весь курс?
Спасибо.
Марина Гайдукевич нет, весь курс можно взять за 10. Если нужны ещё опции то для этого другие пакеты)
как называется тема в vscode подскажите
Спасибо за отличное видео, оно дает полное представление о работе webpack.
Теперь не нужно искать тот самый сакральный конфиг ))
Немного из 2022 (из Webpack 5) (возможно, я ошибаюсь, поправьте):
- вместо CleanWebpackPlugin: просто добавить свойство clean:true в output;
- вместо use:['file-loader']: можно прописать type: "asset/resource";
- на отсутствие @babel/plugin-proposal-class-properties у меня уже не ругался;
- eslint-loader is deprecated: использовал eslint-webpack-plugin.
Без babel/polyfill запускается асинхронная функция?
Спасибо, мил человек
@@RM-bc4pz Да, запускается с ним и без него
"- на отсутствие @babel/plugin-proposal-class-properties у меня уже не ругался;" Потому что статик перешел на другой стейдж и ему теперь для работы отдельный плагин не нужен
@@AqVadPlay спасибо)
Спасибо огромное за видео! Повторяла все, о чем ты рассказывал, не осталось ни одного вопроса, все максимально понятно!) То, что ты делаешь - нереальный труд и огромная инвестиция в будущих программистов)) Не представляю сколько времени тебе заняло научиться так четко и легко объяснять сложные вещи...Спасибо большое!))
Когда шёл на CZcams за обучалками по Webpack - прямо таки молился, чтоб у Владилена Минина был такой контент ) пушка! Спасибо!
для webpack-dev-server:
"start": "webpack serve --mode development --open"
спасибо
Спасибо помогло
Спасибо.
Спасибо
спасибо!!
Владилен, твои туториалы - просто огонь, спасибо тебе большое за твою работу, ты прям нереально помогаешь к собесам готовиться!
Канал Владилена это просто открытие для начинающих фронтэндеров. Все вопросы раскладываются в голове по полочкам. Огромное спасибо за такой труд!
Спустя 3ч. "Ура, мы закончили с базой вебпака"
ААААААААААААА
То, что нужно и чего всегда не хватает. Спасибо!
Владилен, спасибо за видео. Все понятно, без лишней воды. Это мое первое видео на твоем канале, теперь знаю чем заняться на выходных. Жду с нетерпением видео по ESlint. А то толковых гайдов по ниму днем с огнем. Ты реально круто доносишь информацию. Еще раз спасибо.
Видеоролик - "БОМБА"!!!
Спасибо огромное!
Владилен - ты лучше всех!!!
Когда ищу в CZcams какой-то материал, сначала ищу его от тебя и только потом от остальных!
clean-webpack-plugin в пятом вебпаке уже не нужен, можно просто в output прописать настройку clean: true
вот это огонь, СПАСИБО!
Курс - БОМБА!!! Спасибо огроменное!!! Я в восторге! Владилен, ты самый крутой препод!!!
Давно собирался разобраться с вебпаком, и попал на это видео. Никакой воды, все в точку, все что надо знать любому фронтендеру - сжато, но подробно и грамотно. Владилен, спасибо! Буду теперь советовать всем коллегам.
Вот что такое "шок контент"... Владилен, ты просто мега крут
Влад, твои курсы очень помогают подтягиваться по стэку, а вебпак прямо вишенка на торте) Огромное спасибо)
Рад слышать)
Ну как бы ура. наконец-то вменяемый человек адекватным языком объясняет, что и зачем в нужном объеме для понимания, но не слишком глубоко, чтобы не чувствовать себя полным критином. Спасибо Владилен. Чисто, Ясно, Информативно и можно сразу брать на вооружение.
Отличный материал, полный без ошибок в коде, проверено 100%. Владлен, огромная благодарность вам за работу!
Огромное спасибо за урок!!! Не без страданий и гуглёжа, но я его осилил и многое понял!
Пометки из 2023:
1) если у вас стоит расширение jshint - удаляйте его НЕЗАМЕДЛИТЕЛЬНО! (из-за него я настрадался при подключении React)
2) по BundleAnalizerPlugin - может не сработать, а вернее не сработает, если импортируете так, как показано в уроке. Делайте так:
- const BundleAnalizerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
3) решения по остальным несостыковкам, возникающим в связи с развитием webpack с момента записи урока - ищите в комментариях
Спасибо, из всех кого я когда-либо смотрел, твои видео самые понятные и их приятно смотреть
Давай ESLint) И Jest было бы неплохо :)
А видео топ! Спасибо)
я за
я тоже
поддерживаю
+ 1 и еще Jest + React
+1!
Большое спасибо за видео. Приятно, что все действия сопровождаются подробным описанием. И отдельное спасибо за "живые" ошибки: увидеть что может сломаться и как это починить очень важно при освоении нового.
Сверх ясное и понятное объяснение. Все до мелочей!) Спасибо!
Как обычно - лайк не глядя! Уверен, что контет самый лучший, как обычно!
Для тех кто смотрит в 2021 hmr больше прописывать не надо!
@@dasi4301 у мамы спросил. А как ты думаешь где?) Может быть на официальном сайте webpack, который регулярно обновляется?)
@@dasi4301 да не "агрюсь" я. Просто вопросы найглупейшие. Понимаю теперь, что ты ещё подросток, судя по твоей фразе "агриться", однако пойми - в прогинге и разработке приложений нечего делать, если человек не умеет самостоятельно искать информацию, ибо это будет составлять минимум 70% всей твоей работы.
щастья, здоровьечка тебе, добрый путник, ты сэкономил мне кучу времени и нервов)
Как всегда приятно обучаться по твоему контенту, все четко, грамотно и понятно. Спасибо Владилен.
Давно хотел разобраться с кучей ключей-конфигов для Webpack и очень рад, что нашел это видео! Спасибо большое, Владилен!
"можно помедленнее, я записываю" ©️
спасибо! много чего стало понятно, буду пробовать применять на практике 🎓. жму руку и палец вверх. 🖖
Владилен, спасибо большое! Давно слежу за вашей работой и подписан, понадобилось вспомнить и сразу подумал что здесь найду лучшее и не ошибся!
Владилен, огромнейшее спасибо! Это космос.) Каналу в топ осталось пожелать, а плюсов в карму ты и так дофига заработал; ))
Лайк срочно! )) Спасибо, Владилен!
1:09:00 ! Для тех людей, у которых создаётся лишняя картинка, нужно в конфиге вместо use: ['file-loader'] написать type: 'asset/resource'
Работает, а почему так ?
@@user-sr8eo3ct9h webpack 5 версии решил сделать их из коробки, для упрощения работы с другими созависимыми модулями.
спасибо!
Спасибо:)
Спасибо
Владилен, спасибо за урок! Несмотря на то, что некоторые параметры уже записывать немного по другому, видео очень помогло. Урок классный, понятно изложен материал!!!
Видеоурок - Топ! Спасибо огромное, больше бы таких уроков
Не знаю, как у вас, но у меня file-loader ломает картинку (она не открывается) при работе с CSS (например, при использовании в background-image). Нашел решение: не использовать file-loader :) Оказывается в webpack есть встроенный file-loader. Просто пропишите следующее правило, вместо правила на использования file-loader:
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource'
}
верно, я часа полтора решал эту проблему. и момент в этом видео хватает подобных. все приходилось гуглить... не особо актульное видео.
вебпак у вас 5 версии, а на то время её не было
Реально сработало, спасибо. 3 дня пытался понять, что не так.
Искренне благодарю, помогло! А я-то думаю, в чём беда. Думал, потому, что использую sass-loader, а оно вот что.
спасибо мужик! а то я прям голову сломал! причем до установки file-loader все работало, и я не сразу понял, что сломалось именно из-за этого.
касательно "Автоматизации копирования статических файлов" 1:41:21
После обновления до 3.11 появился новый шаблон , следующая запись теперь должна выглядеть вот так:
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "src/favicon.ico"),
to: path.resolve(__dirname, "dist")
},
]
})
Дай бог вам здоровья
почему?
Спасибо.
Спасибо. А то устал с этой частью разбираться, что не так.
Как всегда видос на высшем уровне! Спасибо тебе огромное за твой труд!
Самый полный и понятный ролик по вебпак. От души, всех благ тебе
Уфффф) Просто лайк не глядя! UPD: было бы круто разобрать и Eslint
Если пишете в vsCode и вдруг возникнет проблема с MiniCssExtractPlugin
Error: Automatic publicPath is not supported in this browser
Получилось победить так:
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: path.resolve(__dirname, 'dist')
},
}
,'css-loader'
]
Спасибо! Мне помог Ваш комментарий!
Брат ты лучший)
Спасибо!
Две чашечки чая этому господину!
....Да обрящет ищущий!
Спасибо дружище! Двое суток в ступоре, и ищу ответ на описание MiniCssExtractPlugin именно на этот Error: Automatic publicPath... и т.д. Интернет выдает много, да всё не то. Хорошо что мелькнула мысль заглянуть сюда в этот чат. Огромное спасибо.
Такое классное видео! Наконец-то начал понимать для чего нужен webpack и как он работает! Спасибо огромное за труд!!!
Огромное спасибо за курс! Лучший учитель, все понятно и интересно!
Владилен круто будет увидеть ролик по eslint настроеный и видео по тестам на jest
На конец то бл*ь, нормальное объяснение.jpg .
Не очень люблю видео гайды, не удобно отматывать и искать что то повторить, но нормальных текстовых туториалов по вебпаку нет, от слова совсем.
Но ваш туториал прям путеводная звезда! Хоть кто то в полном объеме объясняет что происходит, и что нужно делать. Спасибо за огромный труд.
Тупо лучший ютубер!!! Пишу любой запрос по js и открывается именно твое видео, есть просто все что нужно! Респект
Ура, спасибо большое за курс. То что нужно, всегда в тему.
Пожалуйста сделай курс по Webpack 5
а в видео разбирался лоадер для pug?
просто лень искать
@@timofeysyr5163 нет
Благодарю. Все доступно и понятно, без лишней воды. Просмотрел на одном дыхании. Краткий конспект на 3 страницы вышел.
Большое тебе человеческое спасибо, мужик!!
Очень полезно и информативно.
Нет воды, приятно слушать, подача материала четкая и внятная.
Это большая и качественная работа.
Отблагодарил на ЯД, еще раз спасибо!
Владилен, сделай пожалуйста курс на Webpack 5, много чего уже поменялось
Лайк, чтобы в топ
а какой смысл? чуть меняется синтаксис , а в целом в данном видео понятна вся суть и механика пакета
Какая версия ноды в проекте? Ловлю кучу ошибок при запуске исходника
Просто лучший курс по вебпаку! 3 дня по 10 часов рыл все что можно, ничего не получалось, посмотрел твой курс в 3 часа и все получилось) спасибо тебе!
Владилен, спасибище! Я на ваших видео прям прокачася по многим темам! Патерны, вебпак, промисы, фетч. все огонь!
жжошь Влад, 3 часа информативного контента!
Сам удивился, что так много подготовил)
Владилен Минин я не успеваю твои старые ролики пересмотреть, пока штудирую старое - выходит новое. Вот это уровень
@@johnd1431 И мы только начинаем)
С развитием вашего канала все директора платных курсов плачут и с валерьянкой "ждут" новых выпусков) спасибо за ваш труд!
Как обычно годнота)
Спасибо за столь информативные видео!
Немерено вложено труда в данное видео.
Разложил webpack по полочкам просто и доступно.
Спасибо!
Итак судя по всему в новой версии webpack на 26/11/20 нельзя запустить webpack-dev-server --open, во первых теперь команда выглядит так "start": "webpack serve", а для дополнительных опций, таких как открытие окна браузера переходим в конфиг и в module.exports{devServer: {
open: true}}
спасибо тебе!!! помогло!!!
Лайк не глядя!
Super . Пожалуйста!!!! продолжай подобные курсы :-) очень все понятно! Лучший в Ютубе !!
Спасибо огромное! Отличный урок! А за тайм-коды в описании - вообще суперский респект! :)
Я человек простой, вижу твои видосы - сначала лайкаю, а потом смотрю xd
Классный алгоритм)
Аналогично.
Я вообще как зашел на канал завис по полной. Не могу оторваться.
CZcams плохо относится в видео, которые лайкают до просмотра. Поэтому посмотри хотя бы до половины перед лайком
@@VladilenMinin ну вообще, говорят что ютьюб не засчитывает лайк, если сначала его ставишь, а потом смотришь видос. Так что в алгоритме баг завёлся)
Эх, в 2022 году сборка не рабочая уже((( Выдает тонну ошибок при установке.
npm ci не помогает?
Огромное спасибо за курс! Отличная работа! Приятно Вас слушать! Лайк и подписка!!!
Спасибо! Покрыл огромный пласт и разложил всё по полочкам. Это супер курс!
включайте колокольчик на канале, если тоже хотите в топы вывести Владилена
2:43:20 У кого в Webpack 5 не работают динамические импорты вместе с lodash, то вместо
"import('lodash').then(_ => {})"
пишем
"import('lodash').then(({ default: _ }) => {})"
спасибо!
import("lodash").then(({ default: _ }) => { console.log("Lodash\t", _.random(0, 27, true)); });
спасибо большое!
и еще у меня в dist файл 0.js не появился. Хотя все работает.
до сих пор лучшее видео про вебпак на ютубе
Я сам не досмотрел видео от Ulbi и пришел сюда, здесь подача комофртнее. Владилен обьясняет лучше.
Хлопаю стоя!
Курс огонь!
Взял на вооружение для обучения джунов!
То что нужно) будет что то о Docker-е ??
Докер - это же бекенд. А так - было бы очень интересно тоже посмотреть.
@@dizelvinable И что, что бэкенд?) Автор так же учит ноде
@@Levelord92 ааа, тогда супер) Надеюсь, скоро будет) А то разные видео про докер смотрел, но всё равно остаётся много вопросов.
@@dizelvinable ну не совсем для бэк. можно использовать и для развертывания разных окружений разработки фронт. ну и локально несколько бэков иметь, для разработки под них фронт - тож актуально
@@dmitryfokin5205 Ясно, спасибо)
Для тех у кого проблемы с установкой optimize-css-assets-webpack-plugin, установите его вот таким способом:
1) npm i -D optimize-css-assets-webpack-plugin@4.0.0
2) npm audit fix --force
И тогда в packege.json появится этот плагин последней версии
Помогло спасибо!
Отличное видео, стало понятно как работает webpack и другие сборщики, Спасибо!
Посмотрел на одном дыхании, очень доступно рассказываете, подписался,
спасибо за труд!
Отличный курс, спасибо большое!
Есть пара вопросов
1) Как вставлять картинки через img? Путь указывать относительно исходного индекса или от скомпиленого?
2) Как в папке dist сохранить удобную структуру - папки со скриптами, стилями, картинками и т.п.
Нашел решение?
@@nikolakovac65 Нашел решение?
@@KG-eo1mg Есть решение?
@@nikolakovac65 Не нашёл решения?
@@nikolakovac65 webpack.js.org/configuration/entry-context/#entry
Владилену большое спасибо за видео, а для тех, у кого webpack 5 версии или более, и при установке optimize-css-assets-webpack-plugin ошибки, устанавливайте css-minimizer-webpack-plugin
Да хранит тебя Аллах, мил человек )
Безусловно эти 3 часа потрачены не зря ). Спасибо за видео. Несмотря на продолжительность все очень ёмко.
Это один из лучших курсов. Автор делает большой охват материала, давая понять принципы работы Webpack. Материал очень качественный.
Владилен, (пользуясь случаем) огромное спасибо за курс!!
Остался один непонятный момент:
на этапе (45:55), когда мы настроили webpack, чтобы он автоматом подключал js-файлы в шаблоне html,
у нас фактически поломался наш первоначальный шаблон...
Т.к. в первоначальном шаблоне у нас analytics.[contenthash].js подключался в хедере, а не в конце body...
Предположим нам это критически важно. Как сделать так, чтобы analytics.[contenthash].js (т.е. именно с хешем в названии) отдельно подключался в хедере?
разобрался?
Если вдруг возникнет проблема с MiniCssExtractPlugin
Error: Automatic publicPath is not supported in this browser
Получилось победить так:
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: path.resolve(__dirname, 'dist')
},
}
,'css-loader'
]
спасибо большое!
Кстати у меня в таком случае не грузилас картинка. publicPath: '/dist Изменил на такое,и все работает
'
@@dmitriysannikov6122 хм, у меня тоже была ошибка с подгрузкой изображений , но я думал на file-loader, а в итоге просто костылём всё решил. Писал background-image не в css файле, а в переменной в react и там в файле добавлял уже эту переменную к style блока . Надо будет проверить ваш вариант, спасибо.
если не грузятся шрифты и картинки, то вот так:
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + '/';
},
},
},
'css-loader',
],
},
@@user-xd6ev4gz2k Спасибо)
Отличный курс! Помог разобраться с базовыми вещами, и теперь не страшно смотреть в конфиги webpack-а на проектах) Большое спасибо, Владилен, ты большой молодец!
Очень подробный и крутой материал! Владилен, огромная Вам благодарность!!!
На последних версиях webpack-cli и webpack-dev-server не работает скрипт "webpack-dev-server --mode development --open". Запускайте через скрипт "webpack serve".
Сейчас file-loader для картинок и шрифтов не нужен, просто прописываете в конфиге test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', и test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', соответственно
офигенный урок и самый доступный для понимания. Спасибо тебе большое!!
Владилен ,Спасибо вам огромное !!!!!!!!! слов нету просто выразить благодарность !
Если у кого не работает SASS на 2:07:10 : попробуйте переписать вместо
test: /\.s[ac]ss$/,
на
test: /\.(sass|scss)$/,
В моем случае помогла следующая строка: test: /\.sass$|scss/,
1:47:08 У кого выдаёт "Automatic publicPath is not supported in this browser", пропишите в options:
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + '/';
}
Спасибо за помощь
хахахахах, такая же ошибка была, гуглил час, разобрался, хотел написать как решить эту проблему, и вдруг ты тут с таким же решением, ты где был час назад?)
Спасибо! ))