Webpack. Full Course 2020
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 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 места рядом с типами со стек оверфлоу
Владилен, твои туториалы - просто огонь, спасибо тебе большое за твою работу, ты прям нереально помогаешь к собесам готовиться!
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.
Владилен, спасибо за видео. Все понятно, без лишней воды. Это мое первое видео на твоем канале, теперь знаю чем заняться на выходных. Жду с нетерпением видео по ESlint. А то толковых гайдов по ниму днем с огнем. Ты реально круто доносишь информацию. Еще раз спасибо.
Это мой третий подход к Webpack - у ! Оказывается он совсем не такой страшный! Владилен у тебя талант делать сложные вещи простыми!
он вновь становится страшным после каждого braking changes обновления...
это сарказм?
Спасибо за отличное видео, оно дает полное представление о работе 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 спасибо)
Спасибо огромное за видео! Повторяла все, о чем ты рассказывал, не осталось ни одного вопроса, все максимально понятно!) То, что ты делаешь - нереальный труд и огромная инвестиция в будущих программистов)) Не представляю сколько времени тебе заняло научиться так четко и легко объяснять сложные вещи...Спасибо большое!))
Когда шёл на TH-cam за обучалками по Webpack - прямо таки молился, чтоб у Владилена Минина был такой контент ) пушка! Спасибо!
Канал Владилена это просто открытие для начинающих фронтэндеров. Все вопросы раскладываются в голове по полочкам. Огромное спасибо за такой труд!
Видеоролик - "БОМБА"!!!
Спасибо огромное!
Владилен - ты лучше всех!!!
Когда ищу в TH-cam какой-то материал, сначала ищу его от тебя и только потом от остальных!
Видео просто 11/10. Просмотрел курс за один присест на скорости 2х. Хочу отметить, что у Вас очень четкая речь и на такой скорости я могу прекрасно понимать, что Вы говорите. Спасибо большое!
Спасибо, из всех кого я когда-либо смотрел, твои видео самые понятные и их приятно смотреть
Большое спасибо за видео. Приятно, что все действия сопровождаются подробным описанием. И отдельное спасибо за "живые" ошибки: увидеть что может сломаться и как это починить очень важно при освоении нового.
Владилен, спасибо за урок! Несмотря на то, что некоторые параметры уже записывать немного по другому, видео очень помогло. Урок классный, понятно изложен материал!!!
Как обычно - лайк не глядя! Уверен, что контет самый лучший, как обычно!
Давно собирался разобраться с вебпаком, и попал на это видео. Никакой воды, все в точку, все что надо знать любому фронтендеру - сжато, но подробно и грамотно. Владилен, спасибо! Буду теперь советовать всем коллегам.
Курс - БОМБА!!! Спасибо огроменное!!! Я в восторге! Владилен, ты самый крутой препод!!!
в Webpack 5 теперь нужно немного поправить devtool - вместо пустых кавычек '' подставить false
devtool: isDev ? 'source-map' : false
Спасибо!
Спасибо, помогло!!
Спасибо большое, мне помогло!))
То, что нужно и чего всегда не хватает. Спасибо!
Отличный материал, полный без ошибок в коде, проверено 100%. Владлен, огромная благодарность вам за работу!
Давно хотел разобраться с кучей ключей-конфигов для Webpack и очень рад, что нашел это видео! Спасибо большое, Владилен!
Ты герой современного программирования!
@@ne4to777 У зоракса немного другой подход
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 прошла.
Владилен, огромнейшее спасибо! Это космос.) Каналу в топ осталось пожелать, а плюсов в карму ты и так дофига заработал; ))
Ну как бы ура. наконец-то вменяемый человек адекватным языком объясняет, что и зачем в нужном объеме для понимания, но не слишком глубоко, чтобы не чувствовать себя полным критином. Спасибо Владилен. Чисто, Ясно, Информативно и можно сразу брать на вооружение.
Лайк не глядя, когда понимаешь, что следующие три часа пройдут офигенно
Приятного просмотра)
поддерживаю!
3*4 если пробовать и изучать
Абсолютно согласна🤩
Влад, твои курсы очень помогают подтягиваться по стэку, а вебпак прямо вишенка на торте) Огромное спасибо)
Рад слышать)
Как всегда приятно обучаться по твоему контенту, все четко, грамотно и понятно. Спасибо Владилен.
Большое тебе человеческое спасибо, мужик!!
Очень полезно и информативно.
Нет воды, приятно слушать, подача материала четкая и внятная.
Это большая и качественная работа.
Отблагодарил на ЯД, еще раз спасибо!
Вот что такое "шок контент"... Владилен, ты просто мега крут
Такое классное видео! Наконец-то начал понимать для чего нужен webpack и как он работает! Спасибо огромное за труд!!!
Владилен, спасибо большое! Давно слежу за вашей работой и подписан, понадобилось вспомнить и сразу подумал что здесь найду лучшее и не ошибся!
"можно помедленнее, я записываю" ©️
спасибо! много чего стало понятно, буду пробовать применять на практике 🎓. жму руку и палец вверх. 🖖
вот это огонь, СПАСИБО!
Благодарю. Все доступно и понятно, без лишней воды. Просмотрел на одном дыхании. Краткий конспект на 3 страницы вышел.
Владилен, спасибище! Я на ваших видео прям прокачася по многим темам! Патерны, вебпак, промисы, фетч. все огонь!
Лайк срочно! )) Спасибо, Владилен!
Уфффф) Просто лайк не глядя! UPD: было бы круто разобрать и Eslint
Тупо лучший ютубер!!! Пишу любой запрос по js и открывается именно твое видео, есть просто все что нужно! Респект
Просто лучший курс по вебпаку! 3 дня по 10 часов рыл все что можно, ничего не получалось, посмотрел твой курс в 3 часа и все получилось) спасибо тебе!
25:24 npx webpack так компилируется сейчас
С развитием вашего канала все директора платных курсов плачут и с валерьянкой "ждут" новых выпусков) спасибо за ваш труд!
Отличный курс! Помог разобраться с базовыми вещами, и теперь не страшно смотреть в конфиги webpack-а на проектах) Большое спасибо, Владилен, ты большой молодец!
Как всегда видос на высшем уровне! Спасибо тебе огромное за твой труд!
Спустя 3ч. "Ура, мы закончили с базой вебпака"
ААААААААААААА
Давай ESLint) И Jest было бы неплохо :)
А видео топ! Спасибо)
я за
я тоже
поддерживаю
+ 1 и еще Jest + React
+1!
Это просто нереально крутой и нереально подробный курс по webpack!!! Спасибо владилен!! До конца ещё не досмотрел, однако все проблемы уже решил с вашей помощью!!! Обязательно досмотрю до конца, чтобы подчерпнуть ещё кучу разных фич!!
Спасибо огромное! Отличный урок! А за тайм-коды в описании - вообще суперский респект! :)
для webpack-dev-server:
"start": "webpack serve --mode development --open"
спасибо
Спасибо помогло
Спасибо.
Спасибо
спасибо!!
Владилен круто будет увидеть ролик по eslint настроеный и видео по тестам на jest
Сверх ясное и понятное объяснение. Все до мелочей!) Спасибо!
Безусловно эти 3 часа потрачены не зря ). Спасибо за видео. Несмотря на продолжительность все очень ёмко.
clean-webpack-plugin в пятом вебпаке уже не нужен, можно просто в output прописать настройку clean: true
Огромное спасибо за курс! Лучший учитель, все понятно и интересно!
Довольно подробно описана работа Webpack. Это видео просто находка. Спасибо в очередной раз Владилену!
P.S. Спасибо ребятам, которые делятся в комментариях командами для терминала.
1:09:00 ! Для тех людей, у которых создаётся лишняя картинка, нужно в конфиге вместо use: ['file-loader'] написать type: 'asset/resource'
Работает, а почему так ?
@@user-sr8eo3ct9h webpack 5 версии решил сделать их из коробки, для упрощения работы с другими созависимыми модулями.
спасибо!
Спасибо:)
Спасибо
жжошь Влад, 3 часа информативного контента!
Сам удивился, что так много подготовил)
Владилен Минин я не успеваю твои старые ролики пересмотреть, пока штудирую старое - выходит новое. Вот это уровень
@@johnd1431 И мы только начинаем)
Немерено вложено труда в данное видео.
Разложил webpack по полочкам просто и доступно.
Спасибо!
Автору респект. Хорошее видео для новичка. Показаны все этапы сборки приложения. Не открыл для себя ничего нового, но жалею, что не было подобного видео когда начинал изучать webpack.
касательно "Автоматизации копирования статических файлов" 1:41:21
После обновления до 3.11 появился новый шаблон , следующая запись теперь должна выглядеть вот так:
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "src/favicon.ico"),
to: path.resolve(__dirname, "dist")
},
]
})
Дай бог вам здоровья
почему?
Спасибо.
Спасибо. А то устал с этой частью разбираться, что не так.
включайте колокольчик на канале, если тоже хотите в топы вывести Владилена
Красавчик ! Спасибо! Я теперь твой постоянный зритель ) . Очень хорошо излагаешь - респект! Не пропускаю ни одного видоса ))). Webpack очень кстати - в наглядной форме закрыл некоторые пробелы в знаниях. Хотелось конечно еще бы увидеть тут про интеграцию с browsersync и адаптацию webpack для работы в связке с php ( в том числе и hmr), например при разработке wordpress-темы. Но это мои нескромные хотелки. А ваще, все твои курсы - это бомба!
Вроде не раз сталкивался с вэбпаком, но видос зашёл на ура. Очень много нового узнал, спасибо! Очень жду курс по nest.js
На конец то бл*ь, нормальное объяснение.jpg .
Не очень люблю видео гайды, не удобно отматывать и искать что то повторить, но нормальных текстовых туториалов по вебпаку нет, от слова совсем.
Но ваш туториал прям путеводная звезда! Хоть кто то в полном объеме объясняет что происходит, и что нужно делать. Спасибо за огромный труд.
Владилену большое спасибо за видео, а для тех, у кого webpack 5 версии или более, и при установке optimize-css-assets-webpack-plugin ошибки, устанавливайте css-minimizer-webpack-plugin
Да хранит тебя Аллах, мил человек )
Super . Пожалуйста!!!! продолжай подобные курсы :-) очень все понятно! Лучший в Ютубе !!
Огромное спасибо за курс! Отличная работа! Приятно Вас слушать! Лайк и подписка!!!
Подписывайтесь на мой инстаграм: instagram.com/vladilen.minin/
Здравствуйте, с удовольствием смотрю, пишу, повторяю за Вами основы js. Какой курс выбрать ..базовый или есть может что-то попродвинутей?
Марина Гайдукевич jsexcel.ru идеально подойдет
@@NextgenSocialReptile последнее уточнение...Это три блока курса, начиная с базового. 80 тыс руб. Правильно? Увидела полтора месяца, это один блок курса? Сколько по времени длится весь курс?
Спасибо.
Марина Гайдукевич нет, весь курс можно взять за 10. Если нужны ещё опции то для этого другие пакеты)
как называется тема в vscode подскажите
Огромное спасибо за урок!!! Не без страданий и гуглёжа, но я его осилил и многое понял!
Пометки из 2023:
1) если у вас стоит расширение jshint - удаляйте его НЕЗАМЕДЛИТЕЛЬНО! (из-за него я настрадался при подключении React)
2) по BundleAnalizerPlugin - может не сработать, а вернее не сработает, если импортируете так, как показано в уроке. Делайте так:
- const BundleAnalizerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
3) решения по остальным несостыковкам, возникающим в связи с развитием webpack с момента записи урока - ищите в комментариях
Видеоурок - Топ! Спасибо огромное, больше бы таких уроков
Спасибо за материал! Посмотрел до конца, многое стало понятно. Раньше WebPack просто пугал, не знал с чего начать изучение! :)
Лайк не глядя!
Не знаю, как у вас, но у меня 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 все работало, и я не сразу понял, что сломалось именно из-за этого.
Самый полный и понятный ролик по вебпак. От души, всех благ тебе
Ура, спасибо большое за курс. То что нужно, всегда в тему.
Итак судя по всему в новой версии webpack на 26/11/20 нельзя запустить webpack-dev-server --open, во первых теперь команда выглядит так "start": "webpack serve", а для дополнительных опций, таких как открытие окна браузера переходим в конфиг и в module.exports{devServer: {
open: true}}
спасибо тебе!!! помогло!!!
Если пишете в 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 работать, спасибо огромное!))
Ого, оч качественно классно информативно. Не хотелось как-то начинать с webpack`ом разбираться, а оказалось, что эти знания супер полезные
Отличный курс, спасибо большое!
Есть пара вопросов
1) Как вставлять картинки через img? Путь указывать относительно исходного индекса или от скомпиленого?
2) Как в папке dist сохранить удобную структуру - папки со скриптами, стилями, картинками и т.п.
Нашел решение?
@@nikolakovac65 Нашел решение?
@@KG-eo1mg Есть решение?
@@nikolakovac65 Не нашёл решения?
@@nikolakovac65 webpack.js.org/configuration/entry-context/#entry
Для тех кто смотрит в 2021 hmr больше прописывать не надо!
@@dasi4301 у мамы спросил. А как ты думаешь где?) Может быть на официальном сайте webpack, который регулярно обновляется?)
@@dasi4301 да не "агрюсь" я. Просто вопросы найглупейшие. Понимаю теперь, что ты ещё подросток, судя по твоей фразе "агриться", однако пойми - в прогинге и разработке приложений нечего делать, если человек не умеет самостоятельно искать информацию, ибо это будет составлять минимум 70% всей твоей работы.
щастья, здоровьечка тебе, добрый путник, ты сэкономил мне кучу времени и нервов)
Посмотрел на одном дыхании, очень доступно рассказываете, подписался,
спасибо за труд!
Как всегда, супер: сложное становится простым, лучший туториал, чтобы начать осваивать вебпак. Как когда-то начал с Владиленом учить фронтэнд, так и часто делаю это сейчас, но теперь чтобы побыстрее добраться до миддла.
Какая версия ноды в проекте? Ловлю кучу ошибок при запуске исходника
Для тех у кого проблемы с установкой optimize-css-assets-webpack-plugin, установите его вот таким способом:
1) npm i -D optimize-css-assets-webpack-plugin@4.0.0
2) npm audit fix --force
И тогда в packege.json появится этот плагин последней версии
Помогло спасибо!
Хлопаю стоя!
Курс огонь!
Взял на вооружение для обучения джунов!
Спасибо, за Работу, Владилен. Решил изучать реакт нэтив встретил этот канал. Купил курс и сэкономил очень много времени в изучении хотя никак не выберу время дойти екго до конца. На мой взгляд здесь самый качественный контэнт по фронтенду в рунете. Еще раз Спасибо!
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 не появился. Хотя все работает.
Эх, в 2022 году сборка не рабочая уже((( Выдает тонну ошибок при установке.
npm ci не помогает?
Как обычно годнота)
Спасибо за столь информативные видео!
Это один из лучших курсов. Автор делает большой охват материала, давая понять принципы работы Webpack. Материал очень качественный.
Если у кого не работает SASS на 2:07:10 : попробуйте переписать вместо
test: /\.s[ac]ss$/,
на
test: /\.(sass|scss)$/,
В моем случае помогла следующая строка: test: /\.sass$|scss/,
Владилен, сделай пожалуйста курс на Webpack 5, много чего уже поменялось
Лайк, чтобы в топ
а какой смысл? чуть меняется синтаксис , а в целом в данном видео понятна вся суть и механика пакета
Ух! Огромное спасибо за ваш труд! Обзор очень познавательный и доходчивый. Теперь уже не так страшно смотреть в конфигурационные файлы webpack )
Очень круто, спасибо большое! Внесло кучу понимания в вопрос о том, как работает vue-cli под капотом. Ожидал еще в конце демонстрацию применения Tree Shaking и наглядную разницу до/после в bundle analyzer :)
Я человек простой, вижу твои видосы - сначала лайкаю, а потом смотрю xd
Классный алгоритм)
Аналогично.
Я вообще как зашел на канал завис по полной. Не могу оторваться.
TH-cam плохо относится в видео, которые лайкают до просмотра. Поэтому посмотри хотя бы до половины перед лайком
@@VladilenMinin ну вообще, говорят что ютьюб не засчитывает лайк, если сначала его ставишь, а потом смотришь видос. Так что в алгоритме баг завёлся)
Пожалуйста сделай курс по Webpack 5
а в видео разбирался лоадер для pug?
просто лень искать
@@timofeysyr5163 нет