Webpack. Full Course 2020

[@VladilenMinin]

Исходники тут: t.me/js_by_vladilen/125 Эксклюзивный контент на моем Boosty: boosty.to/vladilen

[@sepulz]

Лучший гайд!!! Ждём обновления под версию 5.

[@VladilenMinin]

Долго выбирал материал для этого ролика и постарался в нем учесть все ваши пожелания :) Приятного обучения и просмотра!

[@andriikostenko2379]

Большое спасибо за курс! То, что сейчас нужно.

[@НадяРудяк-я9й]

Владилен, огромное спасибо!!! А вы могли бы добавить таймкоды?

[@FDenni]

Большое спасибо! Надеюсь всё же дождусь курс от тебя по NgRx и ещё что-нибудь по Angular)))

[@АндрейАржба]

как обычно, красавчик просто) спасибо огромное). Лайк поставил, к просмотру позже, не успеваю за твоим контентом)

[@FDenni]

@@ИгорьШироков-ц1т Спасибо! Сейчас гляну)

[@AugusteEden]

У кого возникает проблема с CopyWebpackPlugin - там теперь в plugins нужно писать немного иначе: new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, 'src/favicon.ico'), to: path.resolve(__dirname, 'dist') } ] })

[@darklightning2624]

Спасибо тебе, добрый человек

[@technobydlo6093]

Как же подгорает от вебпак мира! Не успел добраться до годного курса, как уже что-то в синтаксисе поменялось.

[@kostasancez2358]

@@technobydlo6093 по этому документация лучше любых курсов

[@vanunsakanyan2188]

спосибо

[@annagardt2360]

Спасибо! Ваш комментарий очень помог!

[@ДанилаБогомолов-о1о]

Проблема с дублированием файлов (png, fonts). Вместо use: 'file-loader' используйте type: 'asset/resource' - это нововведение (относительное) Webpack, которое помогает избежать данной ошибки. Подробнее можно узнать в документации Webpack в разделе asset-modules, там все кристально объяснено.

[@БорисБаровский]

по делу коммент, помог

[@Khiliy]

Супер, спасибо помог!

[@ВладиславКравченко-б4ч]

Святой человек, помог!

[@strange_man317]

@@ВладиславКравченко-б4ч На небе есть отдельное облако для тех, кто кидает годноту в комментах)))

[@ВладиславКравченко-б4ч]

@@strange_man317 места рядом с типами со стек оверфлоу

[@jimlabable]

Это мой третий подход к Webpack - у ! Оказывается он совсем не такой страшный! Владилен у тебя талант делать сложные вещи простыми!

[@oleglego8673]

он вновь становится страшным после каждого braking changes обновления...

[@senails0]

это сарказм?

[@marinagrishina4369]

в Webpack 5 теперь нужно немного поправить devtool - вместо пустых кавычек '' подставить false devtool: isDev ? 'source-map' : false

[@Даниил-л3о1б]

Спасибо!

[@Khiliy]

Спасибо, помогло!!

[@andrey_andreevich_official]

Спасибо большое, мне помогло!))

[@maksymleonidov7059]

25:01 Скорее всего у автора также установлен webpack-cli и глобально, иначе бы команда webpack не вызвалась из терминала. Чтобы не ставить webpack-cli глобально, можно запускать команду в виде 'npx webapck' или создать script в package.json, с помощью которого можно буде вызывать локально установленный webpack

[@olegpristashkin9078]

а что это даст?

[@unheilbar]

@@olegpristashkin9078 тогда он будет использоваться с директории node_modules/.bin

[@АлексейЕремин-к1с]

@Exa1t у меня тоже самое. Кто нибудь нашел решение?

[@АркадийИванович-ф8и]

@Exa1t далее когда импорты пропишешь, подхватит

[@zubrdens]

Спасибо за совет, поставил глобально (npm install --global webpack-cli), тогда команда webpack прошла.

[@JohnDoe-p1y]

Ну как бы ура. наконец-то вменяемый человек адекватным языком объясняет, что и зачем в нужном объеме для понимания, но не слишком глубоко, чтобы не чувствовать себя полным критином. Спасибо Владилен. Чисто, Ясно, Информативно и можно сразу брать на вооружение.

[@vasilymishanin]

Спасибо за отличное видео, оно дает полное представление о работе 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.

[@RM-bc4pz]

Без babel/polyfill запускается асинхронная функция?

[@langonar]

Спасибо, мил человек

[@AqVadPlay]

@@RM-bc4pz Да, запускается с ним и без него

[@AqVadPlay]

"- на отсутствие @babel/plugin-proposal-class-properties у меня уже не ругался;" Потому что статик перешел на другой стейдж и ему теперь для работы отдельный плагин не нужен

[@nikitachihranov1072]

@@AqVadPlay спасибо)

[@oOIMAXIOo]

Ты герой современного программирования!

[@Darkrogua]

@@ne4to777 У зоракса немного другой подход

[@craioffear2619]

Просто лучший курс по вебпаку! 3 дня по 10 часов рыл все что можно, ничего не получалось, посмотрел твой курс в 3 часа и все получилось) спасибо тебе!

[@stanislavgerasimov3534]

Лайк не глядя, когда понимаешь, что следующие три часа пройдут офигенно

[@VladilenMinin]

Приятного просмотра)

[@igortobert]

поддерживаю!

[@ilikecola378]

3*4 если пробовать и изучать

[@yoga_zhivivlegkosti]

Абсолютно согласна🤩

[@yamuru22]

Видео просто 11/10. Просмотрел курс за один присест на скорости 2х. Хочу отметить, что у Вас очень четкая речь и на такой скорости я могу прекрасно понимать, что Вы говорите. Спасибо большое!

[@TemkaMineCraft32rus]

1:09:00 ! Для тех людей, у которых создаётся лишняя картинка, нужно в конфиге вместо use: ['file-loader'] написать type: 'asset/resource'

[@Космик-ъ3е]

Работает, а почему так ?

[@user-r3t]

​@@Космик-ъ3е webpack 5 версии решил сделать их из коробки, для упрощения работы с другими созависимыми модулями.

[@velsh3946]

спасибо!

[@АртемЕльденев-ш1к]

Спасибо:)

[@lalathealter6513]

Спасибо

[@ГеоргийМирошниченко-т8ъ]

для webpack-dev-server: "start": "webpack serve --mode development --open"

[@nefertisu6818]

спасибо

[@aviaavia9147]

Спасибо помогло

[@victorirzunov3108]

Спасибо.

[@ramilnazmiev9448]

Спасибо

[@ДениИмагожев11]

спасибо!!

[@ВячеславРютин-о8й]

Влад, твои курсы очень помогают подтягиваться по стэку, а вебпак прямо вишенка на торте) Огромное спасибо)

[@VladilenMinin]

Рад слышать)

[@sergeytikhonov6544]

до сих пор лучшее видео про вебпак на ютубе

[@RuslanNumber1]

Я сам не досмотрел видео от Ulbi и пришел сюда, здесь подача комофртнее. Владилен обьясняет лучше.

[@vladislavozinkovskyi8276]

касательно "Автоматизации копирования статических файлов" 1:41:21 После обновления до 3.11 появился новый шаблон , следующая запись теперь должна выглядеть вот так: new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, "src/favicon.ico"), to: path.resolve(__dirname, "dist") }, ] })

[@chugundur]

Дай бог вам здоровья

[@olegpristashkin9078]

почему?

[@victorirzunov3108]

Спасибо.

[@АндрейХалимоненко-б9н]

Спасибо. А то устал с этой частью разбираться, что не так.

[@seliyencko7738]

Это один из лучших курсов. Автор делает большой охват материала, давая понять принципы работы Webpack. Материал очень качественный.

[@imCitRUS]

Давай ESLint) И Jest было бы неплохо :) А видео топ! Спасибо)

[@АндрійЙож]

я за

[@Dozortsev]

я тоже

[@alexandrbalashov7543]

поддерживаю

[@AlinaSiomukha]

+ 1 и еще Jest + React

[@РахимАбдраев-у8й]

+1!

[@xqz666]

Досмотрел до конца, с моим графиком работы, все посмотреть и попробовать 90% материала ушла почти неделя. Спасибо Автору , он находка для тех кому html, css, изучение js c lernjavascript уже кажется банальностью.

[@MDanshin]

Как обычно - лайк не глядя! Уверен, что контет самый лучший, как обычно!

[@Civilizer1976]

Ура!!! Поздравьте меня! Три дня назад жаловался здесь, что не осилил этот курс и вернусь к нему позже. Но, блин, не тот человек походу. Как так - это первая технология которая мне не покорилась, да ну нафиг - быть такого не может... В итоге в пятницу кое-как дождавшись окончания работы, начал искать - в чём дело. В итоге: почистил линукс(а он у меня на виртуалке), пересмотрел ещё другие видео по Вебпаку, более раннего периода, в том числе и Владилена, но более раннее на другом канале, так-же Дмитрия Лаврика, ещё кого-то. Всё повторял, ничего не выходило. Перечитал кучу рекоммендаций. В конце концов научился устанавливать и использовать разные версии node.js, устанавливать более ранние пакеты с помощью npm, переустановил даже VSCode и все расширения. В итоге снова решил повторить этот курс, но уже с параметрами как в этом видео. И в итоге всё заработало как надо. Я рад безмерно! Понятно, что мне ещё рановато до использования этой технологии, но всё-же: а что если вдруг, буду устраиваться, или возьму какой-то заказ, а там требование - Вебпак, вот я облажался - бы. А теперь я уверен что всё сработает. Благодаря данному курсу. Вот какие параметры package.json - блок "devDependencies": "devDependencies": { "clean-webpack-plugin": "^3.0.0", "css-loader": "^5.0.0", "csv-loader": "^3.0.3", "file-loader": "^6.2.0", "html-webpack-plugin": "^4.5.0", "style-loader": "^2.0.0", "webpack": "^4.41.5", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.10.1", "xml-loader": "^1.2.1" }, node.js v10.23.0 (lts/dubnium) P.S. не получалось с последними версиями. Понятно, что ещё проблемы будут, но главное что WDS работает и в теге строчка с картинкой отображается уже НЕ как путь до неё(как было) а именно маркапом вида "img": "47692505d122dbcae490be2492a60b2e.png"

[@vladosk-lv6kp]

Отличный курс, спасибо большое! Есть пара вопросов 1) Как вставлять картинки через img? Путь указывать относительно исходного индекса или от скомпиленого? 2) Как в папке dist сохранить удобную структуру - папки со скриптами, стилями, картинками и т.п.

[@nikolakovac65]

Нашел решение?

[@KG-eo1mg]

@@nikolakovac65 Нашел решение?

[@desltiny2884]

@@KG-eo1mg Есть решение?

[@desltiny2884]

@@nikolakovac65 Не нашёл решения?

[@SilverStormAndGoldenRain]

​@@nikolakovac65 webpack.js.org/configuration/entry-context/#entry

[@Max-kr4ie]

Наконец полностью просмотрел данное видео. Это же колоссальная, великолепная работа. Если до видео смотришь на конфиг вэбпака: ээ пойду ка я отсюда, что то пугающе монструозное, вдруг что то сломаю. После видео: о так надо поправить это и это и я получу нужный результат. Еще раз спасибо.

[@ПиратСлавный]

Для тех кто смотрит в 2021 hmr больше прописывать не надо!

[@dyscyber]

@@dasi4301 у мамы спросил. А как ты думаешь где?) Может быть на официальном сайте webpack, который регулярно обновляется?)

[@dyscyber]

@@dasi4301 да не "агрюсь" я. Просто вопросы найглупейшие. Понимаю теперь, что ты ещё подросток, судя по твоей фразе "агриться", однако пойми - в прогинге и разработке приложений нечего делать, если человек не умеет самостоятельно искать информацию, ибо это будет составлять минимум 70% всей твоей работы.

[@PWBastille]

щастья, здоровьечка тебе, добрый путник, ты сэкономил мне кучу времени и нервов)

[@MaxYanov]

Как всегда супер! Друзья, давайте поможем Владилену с продвижением, он трудится, хорошо объясняет, уверен вы согласитесь со мной что пришло время нам его отблагодарить. Делитесь его видео в соцсетях. Я уже.

[@stereogrid]

Вот что такое "шок контент"... Владилен, ты просто мега крут

[@one-zero-dev]

Топовый курс! Особенно понравилось, что разобрано много ошибок, которые могут встретиться при настройке кофигурации Webpack Добавлю, что при установке некоторых пакетов возникали другие ошибки типа: } catch {} SyntaxError: Unexpected token { Всё дело в том, что у меня более старая версия node. Если кто поймает такую ошибку, поищите на npmjs.com предыдущие версии пакета и поставьте его: npm i название_пакета@версия

[@ДенисАндреев-ч9к]

Спустя 3ч. "Ура, мы закончили с базой вебпака" ААААААААААААА

[@СашаЛьвович-ж2д]

Переслушивал учебный материал по нескольку раз, и каждый раз находил пропущенные мимо ушей полезности. Каждый комментарий по делу! Выражаю огромное уважение Владилену. Спасибо!

[@VladilenMinin]

В этом видео и я правда очень много сконцентрировал)

[@ДмитрийЗамулин-п6и]

У кого не работает webpack-dev-server, в конфиге нужно указать следующее: devServer: { open: true, hot: true, port: 'auto', static: { directory: './src', watch: true } } на январь 22 года всё работает

[@kalychka]

Владилен, наткнулся на твой канал на днях, как раз надо было настраивать вебпак, скажу вот что: ты единственный, кто смог изложить материал так, что понятно абсолютно все, благодаря тебе я смог настроить все правильно. У тебя актуальная информация по вебпаку. Единственное, чего не хватило - это как расположить файлы в папке dist по категориям, структурировать, но думаю в документации я найду ответ. Спасибо тебе, я никогда не пишу комментарии, но это отдельный случай!

[@romanliapkin5174]

На конец то бл*ь, нормальное объяснение.jpg . Не очень люблю видео гайды, не удобно отматывать и искать что то повторить, но нормальных текстовых туториалов по вебпаку нет, от слова совсем. Но ваш туториал прям путеводная звезда! Хоть кто то в полном объеме объясняет что происходит, и что нужно делать. Спасибо за огромный труд.

[@hollow.one.w]

как же он хорош... чел, ты настоящий учитель! материал очень хорошо разжеван, осталось только переварить

[@Д822]

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

[@rustamtishkov2479]

Чел ты лучший, я неделю назад много не понимал в js. На протяжение этой недели я смотрел твои видосы и с каждым днем js становился все понятнее и понятнее, щас досмотрю этот видос и начну vue. Тупа лучший, щас специально всем видосам лайки поставлю, даже те которые не смотрел

[@VladilenMinin]

Рад слышать)

[@nikita7978]

Спасибо, из всех кого я когда-либо смотрел, твои видео самые понятные и их приятно смотреть

[@Angelica-mv9gg]

спасибо за видео! для тех у кого не пашет hot dev-server, даже после обновления команды, в package.json: "start": "cross-env NODE_ENV=development webpack serve --mode development", в webpack.config.js: devServer: { port: 8080, // любой порт open: true, watchOptions: { poll: true, ignored: "/node_modules/" }, }, и еще в module.exports добавить target: 'web'. Последняя настройка обязательна если стоит "browserslist" в package.json. Пока что они несовместимы без этого, по крайней мере, у меня ничего не вышло

[@ITWork-m8j]

Клёвый курс, мне раньше вебпак казался сложным и я не понимал зачем он нужен, но теперь мое мнение изменилось и вебпак мне кажется удобным и полезным

[@gladiatorrussia]

Пожалуйста сделай курс по Webpack 5

[@timofeysyr5163]

а в видео разбирался лоадер для pug?

[@timofeysyr5163]

просто лень искать

[@gladiatorrussia]

@@timofeysyr5163 нет

[@СергейАлександров-я4т]

Автору респект. Хорошее видео для новичка. Показаны все этапы сборки приложения. Не открыл для себя ничего нового, но жалею, что не было подобного видео когда начинал изучать webpack.

[@maximminchenko7633]

Уфффф) Просто лайк не глядя! UPD: было бы круто разобрать и Eslint

[@ILDARRKAMALOV]

Спасибо большое. Одно из самых дельных видео по Webpack. Правда на 2022 год видео немного устарело, некоторые конфигурации для некоторых плагинов пришлось переписать (это всё очень быстро нагуглилось и проблем не составило) и всё запускается и работает.

[@str1ve450]

Владилену большое спасибо за видео, а для тех, у кого webpack 5 версии или более, и при установке optimize-css-assets-webpack-plugin ошибки, устанавливайте css-minimizer-webpack-plugin

[@АлексейСаломатин-о4ю]

Да хранит тебя Аллах, мил человек )

[@sonterix]

Меня очень веселит то, как ты шрифт называешь 'работо' 😄

[@aviaavia9147]

Для тех у кого проблемы с установкой optimize-css-assets-webpack-plugin, установите его вот таким способом: 1) npm i -D optimize-css-assets-webpack-plugin@4.0.0 2) npm audit fix --force И тогда в packege.json появится этот плагин последней версии

[@BestMusicTheAppolo]

Помогло спасибо!

[@aleksgavrilov5275]

Очень подробно и хорошо всё разжевано и в рот положено)) то что доктор прописал, уже не первый раз пытался разобраться с вебпаком, но до этого все было безуспешно, спасибо от души!!!

[@lockd0wnll178]

Я человек простой, вижу твои видосы - сначала лайкаю, а потом смотрю xd

[@VladilenMinin]

Классный алгоритм)

[@АлександрКулик-м7я]

Аналогично.

[@АлександрКулик-м7я]

Я вообще как зашел на канал завис по полной. Не могу оторваться.

[@beefeater5427]

KZbin плохо относится в видео, которые лайкают до просмотра. Поэтому посмотри хотя бы до половины перед лайком

[@Женя-и5б3я]

@@VladilenMinin ну вообще, говорят что ютьюб не засчитывает лайк, если сначала его ставишь, а потом смотришь видос. Так что в алгоритме баг завёлся)

[@669pain]

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

[@Профилактика-е3к]

Владилен круто будет увидеть ролик по eslint настроеный и видео по тестам на jest

[@zulagwido1309]

Наконец-то нормальный курс по Webpack! Автору благодарность! :-) Конечно, хорошо бы ещё одно видео по последней версии... много поменялось.

[@kotovadana]

Спасибо огромное за видео! Повторяла все, о чем ты рассказывал, не осталось ни одного вопроса, все максимально понятно!) То, что ты делаешь - нереальный труд и огромная инвестиция в будущих программистов)) Не представляю сколько времени тебе заняло научиться так четко и легко объяснять сложные вещи...Спасибо большое!))

[@webuxmotion]

Это лучшее видео про webpack. Просмотрел и повторил на своей машине на одном дыхании.

[@coderslav4505]

Не знаю, как у вас, но у меня file-loader ломает картинку (она не открывается) при работе с CSS (например, при использовании в background-image). Нашел решение: не использовать file-loader :) Оказывается в webpack есть встроенный file-loader. Просто пропишите следующее правило, вместо правила на использования file-loader: { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource' }

[@hlebhlebowski]

верно, я часа полтора решал эту проблему. и момент в этом видео хватает подобных. все приходилось гуглить... не особо актульное видео.

[@KaelnsLarien]

вебпак у вас 5 версии, а на то время её не было

[@deniskotov]

Реально сработало, спасибо. 3 дня пытался понять, что не так.

[@romko-romario]

Искренне благодарю, помогло! А я-то думаю, в чём беда. Думал, потому, что использую sass-loader, а оно вот что.

[@tavanix]

спасибо мужик! а то я прям голову сломал! причем до установки file-loader все работало, и я не сразу понял, что сломалось именно из-за этого.

[@beramaks]

Спасибо! Покрыл огромный пласт и разложил всё по полочкам. Это супер курс!

[@AlexanderShinigami]

clean-webpack-plugin в пятом вебпаке уже не нужен, можно просто в output прописать настройку clean: true

[@fractonart7500]

Спасибо, за Работу, Владилен. Решил изучать реакт нэтив встретил этот канал. Купил курс и сэкономил очень много времени в изучении хотя никак не выберу время дойти екго до конца. На мой взгляд здесь самый качественный контэнт по фронтенду в рунете. Еще раз Спасибо!

[@eGusevWeb]

Когда шёл на KZbin за обучалками по Webpack - прямо таки молился, чтоб у Владилена Минина был такой контент ) пушка! Спасибо!

[@ОлегИ-ь9ш]

Super . Пожалуйста!!!! продолжай подобные курсы :-) очень все понятно! Лучший в Ютубе !!

[@whyNotCookies]

Если пишете в 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' ]

[@annagardt2360]

Спасибо! Мне помог Ваш комментарий!

[@denideni2633]

Брат ты лучший)

[@АлексейЛоскутников-ю4р]

Спасибо!

[@Даниил-л3о1б]

Две чашечки чая этому господину!

[@ВасилийБрин-ъ4ъ]

....Да обрящет ищущий! Спасибо дружище! Двое суток в ступоре, и ищу ответ на описание MiniCssExtractPlugin именно на этот Error: Automatic publicPath... и т.д. Интернет выдает много, да всё не то. Хорошо что мелькнула мысль заглянуть сюда в этот чат. Огромное спасибо.

[@ВладиславП-д7л]

Благодарю. Все доступно и понятно, без лишней воды. Просмотрел на одном дыхании. Краткий конспект на 3 страницы вышел.

[@garikmelqonyan9130]

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.

[@oleksandrsavych4526]

Давно хотел разобраться с кучей ключей-конфигов для Webpack и очень рад, что нашел это видео! Спасибо большое, Владилен!

[@1604MafiaBest]

Итак судя по всему в новой версии webpack на 26/11/20 нельзя запустить webpack-dev-server --open, во первых теперь команда выглядит так "start": "webpack serve", а для дополнительных опций, таких как открытие окна браузера переходим в конфиг и в module.exports{devServer: { open: true}}

[@artthemad]

спасибо тебе!!! помогло!!!

[@ЕвгенийВладимирович-ш1с]

Владилен, огромнейшее спасибо! Это космос.) Каналу в топ осталось пожелать, а плюсов в карму ты и так дофига заработал; ))

[@borislobanov7896]

Владилен, твои туториалы - просто огонь, спасибо тебе большое за твою работу, ты прям нереально помогаешь к собесам готовиться!

[@egrpavlov2694]

Ого, оч качественно классно информативно. Не хотелось как-то начинать с webpack`ом разбираться, а оказалось, что эти знания супер полезные

[@johnd1431]

жжошь Влад, 3 часа информативного контента!

[@VladilenMinin]

Сам удивился, что так много подготовил)

[@johnd1431]

Владилен Минин я не успеваю твои старые ролики пересмотреть, пока штудирую старое - выходит новое. Вот это уровень

[@VladilenMinin]

@@johnd1431 И мы только начинаем)

[@pliaronstudio5149]

Для тех у кого не работет webpack-dev-server (автообновление): В файле package.json команда start должна быть такой: "start": "webpack serve --open" В файле webpack.config.js настройки devServer должны быть такие: devServer: { port: 4200, watchFiles: ["./src/*"], },

[@mariakhabian2744]

Большое спасибо за рабочее решение! =)

[@daurenaidenov1992]

2:43:20 У кого в Webpack 5 не работают динамические импорты вместе с lodash, то вместо "import('lodash').then(_ => {})" пишем "import('lodash').then(({ default: _ }) => {})"

[@АнварАппазов-я1г]

спасибо!

[@СвириденкоВолодимир-х1с]

import("lodash").then(({ default: _ }) => { console.log("Lodash\t", _.random(0, 27, true)); });

[@nikitachihranov1072]

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

[@nikitachihranov1072]

и еще у меня в dist файл 0.js не появился. Хотя все работает.

[@vladislavozinkovskyi8276]

Немерено вложено труда в данное видео. Разложил webpack по полочкам просто и доступно. Спасибо!

[@pavel.arepev]

Если у кого не работает SASS на 2:07:10 : попробуйте переписать вместо test: /\.s[ac]ss$/, на test: /\.(sass|scss)$/,

[@dangor220]

В моем случае помогла следующая строка: test: /\.sass$|scss/,

[@ДаниилСаркисян-б4д]

Тупо лучший ютубер!!! Пишу любой запрос по js и открывается именно твое видео, есть просто все что нужно! Респект

[@brabus765]

25:24 npx webpack так компилируется сейчас

[@nikolai4100]

Владилен, спасибище! Я на ваших видео прям прокачася по многим темам! Патерны, вебпак, промисы, фетч. все огонь!

[@alexsoft7073]

Владилен, сделай пожалуйста курс на Webpack 5, много чего уже поменялось Лайк, чтобы в топ

[@sanlaynx]

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

[@duce201]

Такое классное видео! Наконец-то начал понимать для чего нужен webpack и как он работает! Спасибо огромное за труд!!!

[@alexandrmerser8443]

Отличный курс! Помог разобраться с базовыми вещами, и теперь не страшно смотреть в конфиги webpack-а на проектах) Большое спасибо, Владилен, ты большой молодец!

[@weblegko]

Красавчик ! Спасибо! Я теперь твой постоянный зритель ) . Очень хорошо излагаешь - респект! Не пропускаю ни одного видоса ))). Webpack очень кстати - в наглядной форме закрыл некоторые пробелы в знаниях. Хотелось конечно еще бы увидеть тут про интеграцию с browsersync и адаптацию webpack для работы в связке с php ( в том числе и hmr), например при разработке wordpress-темы. Но это мои нескромные хотелки. А ваще, все твои курсы - это бомба!

[@danko5678]

Сейчас file-loader для картинок и шрифтов не нужен, просто прописываете в конфиге test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', и test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', соответственно

[@romko-romario]

Как всегда, супер: сложное становится простым, лучший туториал, чтобы начать осваивать вебпак. Как когда-то начал с Владиленом учить фронтэнд, так и часто делаю это сейчас, но теперь чтобы побыстрее добраться до миддла.

[@george6514]

1:47:08 У кого выдаёт "Automatic publicPath is not supported in this browser", пропишите в options: publicPath: (resourcePath, context) => { return path.relative(path.dirname(resourcePath), context) + '/'; }

[@ВладимирЧернов-ш8б]

Спасибо за помощь

[@ЭйЭй-ы1и]

хахахахах, такая же ошибка была, гуглил час, разобрался, хотел написать как решить эту проблему, и вдруг ты тут с таким же решением, ты где был час назад?)

[@emagcodeshake]

Спасибо! ))

[@wwiiktor]

Вот я заметил, что именно видео курсы про веб инструменты хорошо усваиваются , но что то потяжелее конечно эффективнее смешивать с книжным форматов. Но автору огромный респект, ознакомиться с новым инструментом так легко и не принужденно это определенно талант исполнителя играет роль. Получу зп. обязательно поддержу ваш канал! Успехов в учебе всем!(:

[@nick_stelmakh]

То что нужно) будет что то о Docker-е ??

[@dizelvinable]

Докер - это же бекенд. А так - было бы очень интересно тоже посмотреть.

[@Levelord92]

@@dizelvinable И что, что бэкенд?) Автор так же учит ноде

[@dizelvinable]

@@Levelord92 ааа, тогда супер) Надеюсь, скоро будет) А то разные видео про докер смотрел, но всё равно остаётся много вопросов.

[@dmitryfokin5205]

@@dizelvinable ну не совсем для бэк. можно использовать и для развертывания разных окружений разработки фронт. ну и локально несколько бэков иметь, для разработки под них фронт - тож актуально

[@dizelvinable]

@@dmitryfokin5205 Ясно, спасибо)

[@ivan_sukhachev]

Большое тебе человеческое спасибо, мужик!! Очень полезно и информативно. Нет воды, приятно слушать, подача материала четкая и внятная. Это большая и качественная работа. Отблагодарил на ЯД, еще раз спасибо!

[@angerinfinity5075]

Буду рад увидеть ещё курсы: - по ESLint - Redux/MobX - Jest

[@adil88201]

0:48:53 У кого не работает npm run dev или npm run build нужно написать "scripts": { "dev": "npx webpack --mode development", "build": "npx webpack --mode production" } вместо "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }

[@aprinciple9559]

Для CopyWebPackPlugin plugins: [ new CopyPlugin({ patterns: [ { from: 'source', to: 'dest' }, { from: 'other', to: 'public' }, ], }), ],

[@georgepetrosyan4589]

da ia toje na etom poka zastral, potom polez na oficialku ona zakrita vremeno iza bezporadkov v USA, polez cherez cherez nashel etot block sdelal, zarabotalo. Pochustvoval sebia BOGOM WEBA :D :D :D

[@dossh429]

Время 1:42:13

[@maxzhukov5525]

Для тех, кто делает так же как в уроке: new CopyWebpackPlugin({ patterns: [ { from: 'favicon.ico', to: '../dist' }, ], }),

[@saint7794]

Или поставить версию copy-webpack-plugin ^5.1.1

[@georgepetrosyan4589]

@@saint7794 nu esli eto ne poslednaia versia kotoryiu vi ukazivaete? To dumau luche stavit poslednuiu. A princip privazki ne imeet znachenie. Ved video snimalos za dolgo do vixoda novoi versii plugina)))

[@artemwolkov8567]

Лучшее из того что я вообще находил на просторах ютуб. Подача материала очень понятная, да у меня пес свою сборку напишет после этого видео. Огромное спасибо за труды!

[@Профилактика-е3к]

вот это огонь, СПАСИБО!

[@ДмитрийБаженов-ч5ы]

Отличное видео, стало понятно как работает webpack и другие сборщики, Спасибо!

[@MC-sn7yk]

Если вдруг возникнет проблема с MiniCssExtractPlugin Error: Automatic publicPath is not supported in this browser Получилось победить так: test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: path.resolve(__dirname, 'dist') }, } ,'css-loader' ]

[@artthemad]

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

[@dmitriysannikov6122]

Кстати у меня в таком случае не грузилас картинка. publicPath: '/dist Изменил на такое,и все работает '

[@artthemad]

@@dmitriysannikov6122 хм, у меня тоже была ошибка с подгрузкой изображений , но я думал на file-loader, а в итоге просто костылём всё решил. Писал background-image не в css файле, а в переменной в react и там в файле добавлял уже эту переменную к style блока . Надо будет проверить ваш вариант, спасибо.

[@ЭйЭй-ы1и]

если не грузятся шрифты и картинки, то вот так: { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: (resourcePath, context) => { return path.relative(path.dirname(resourcePath), context) + '/'; }, }, }, 'css-loader', ], },

[@alexbekar6978]

@@ЭйЭй-ы1и Спасибо)

[@demimurych1]

59:50 *Подгрузить JSON и JavaScript* Вероятно следует уточнить этот вопрос, потому как для многих он не до конца прозрачен. В самом JS нет ни возможности прочитать файл, ни тем более получить что-то удаленно. Этот функционал импортируется разными сторонними API, в зависимости от условий в которых работает JS. В случае node это FSReqCallback который является оберткой вокруг uv_fs_* функций из C++ В случае браузерной среды, можно использовать xhr api с пришедшим ему на смену fetch api. А для чтения локальных файлов, вполне уже можно использовать Filesystem Api. В случае какого нибудь китайского чайника с js на борту может вообще не быть никаких аналогов. Важно всегда проводить эту границу, чтобы вдруг потом не удивляться почему это в Node нет Fetch

[@armer2001]

Владлен, спасибо за материал. Очень помогло в изучении webpack. Сегодня проработал с учетом Webpack 5 и изменений в плагинах. Форкнул вашу сборку и ввел изменения. Вот что получилось в результате: github.com/Armer7/webpack-2020

[@beramaks]

Armen Спасибо!!!

[@Amourphys]

Большое спасибо вам, вы мне помогли победить одну проблему с babel

[@ИринаШабулдаева-л6в]

Спасибо, воспользовалась вашим кодом)

[@chewed2024]

Контент огонь! Я все писал под webpack5 -> немного гуглежки, немного чтения офф доки, и все завелось)) Это наверное даже полезнее было чем просто посмотреть видяшку и повторить за автором)) Автору респект, продолжай в том же духе)

[@Codaconda]

Довольно подробно описана работа Webpack. Это видео просто находка. Спасибо в очередной раз Владилену! P.S. Спасибо ребятам, которые делятся в комментариях командами для терминала.

[@ОлегЕ-и7х]

Владилен, (пользуясь случаем) огромное спасибо за курс!! Остался один непонятный момент: на этапе (45:55), когда мы настроили webpack, чтобы он автоматом подключал js-файлы в шаблоне html, у нас фактически поломался наш первоначальный шаблон... Т.к. в первоначальном шаблоне у нас analytics.[contenthash].js подключался в хедере, а не в конце body... Предположим нам это критически важно. Как сделать так, чтобы analytics.[contenthash].js (т.е. именно с хешем в названии) отдельно подключался в хедере?

[@SNSDfOu]

разобрался?

[@evgenOksigen]

Для тех у кого будет ошибка что "webpack module not found" или что "zsh не знает такой команды webpack" : как вариант решения - вам нужно установить webpack + webpack-cli + webpack-dev-server глобально с помощью команды " sudo npm i -g webpack webpack-cli webpack-dev-server " теперь можете (находясь в папке проэкта) запускать команду webpack и получите результат такой же как в видео ) Всем добра, Владилену - спасибо за годный контент Ты крут !

[@АлексейСедов-й5м]

не обязательно глобально ставить вебпак, можно использовать npm утилиту - npx. Установить пакет, потом запускать - Например npx webpack

[@Крек-н1к]

Такс, мои планы на субботу меняются

[@_serg_]

Планы подрочить перенеслись на воскресенье