Проблема с дублированием файлов (png, fonts). Вместо use: 'file-loader' используйте type: 'asset/resource' - это нововведение (относительное) Webpack, которое помогает избежать данной ошибки. Подробнее можно узнать в документации Webpack в разделе asset-modules, там все кристально объяснено.
У кого возникает проблема с CopyWebpackPlugin - там теперь в plugins нужно писать немного иначе: new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, 'src/favicon.ico'), to: path.resolve(__dirname, 'dist') } ] })
25:01 Скорее всего у автора также установлен webpack-cli и глобально, иначе бы команда webpack не вызвалась из терминала. Чтобы не ставить webpack-cli глобально, можно запускать команду в виде 'npx webapck' или создать script в package.json, с помощью которого можно буде вызывать локально установленный webpack
касательно "Автоматизации копирования статических файлов" 1:41:21 После обновления до 3.11 появился новый шаблон , следующая запись теперь должна выглядеть вот так: new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, "src/favicon.ico"), to: path.resolve(__dirname, "dist") }, ] })
Спасибо за отличное видео, оно дает полное представление о работе 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/plugin-proposal-class-properties у меня уже не ругался;" Потому что статик перешел на другой стейдж и ему теперь для работы отдельный плагин не нужен
Видео просто 11/10. Просмотрел курс за один присест на скорости 2х. Хочу отметить, что у Вас очень четкая речь и на такой скорости я могу прекрасно понимать, что Вы говорите. Спасибо большое!
59:50 *Подгрузить JSON и JavaScript* Вероятно следует уточнить этот вопрос, потому как для многих он не до конца прозрачен. В самом JS нет ни возможности прочитать файл, ни тем более получить что-то удаленно. Этот функционал импортируется разными сторонними API, в зависимости от условий в которых работает JS. В случае node это FSReqCallback который является оберткой вокруг uv_fs_* функций из C++ В случае браузерной среды, можно использовать xhr api с пришедшим ему на смену fetch api. А для чтения локальных файлов, вполне уже можно использовать Filesystem Api. В случае какого нибудь китайского чайника с js на борту может вообще не быть никаких аналогов. Важно всегда проводить эту границу, чтобы вдруг потом не удивляться почему это в Node нет Fetch
Если пишете в 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... и т.д. Интернет выдает много, да всё не то. Хорошо что мелькнула мысль заглянуть сюда в этот чат. Огромное спасибо.
Ну как бы ура. наконец-то вменяемый человек адекватным языком объясняет, что и зачем в нужном объеме для понимания, но не слишком глубоко, чтобы не чувствовать себя полным критином. Спасибо Владилен. Чисто, Ясно, Информативно и можно сразу брать на вооружение.
Отличный курс, спасибо большое! Есть пара вопросов 1) Как вставлять картинки через img? Путь указывать относительно исходного индекса или от скомпиленого? 2) Как в папке dist сохранить удобную структуру - папки со скриптами, стилями, картинками и т.п.
Ура!!! Поздравьте меня! Три дня назад жаловался здесь, что не осилил этот курс и вернусь к нему позже. Но, блин, не тот человек походу. Как так - это первая технология которая мне не покорилась, да ну нафиг - быть такого не может... В итоге в пятницу кое-как дождавшись окончания работы, начал искать - в чём дело. В итоге: почистил линукс(а он у меня на виртуалке), пересмотрел ещё другие видео по Вебпаку, более раннего периода, в том числе и Владилена, но более раннее на другом канале, так-же Дмитрия Лаврика, ещё кого-то. Всё повторял, ничего не выходило. Перечитал кучу рекоммендаций. В конце концов научился устанавливать и использовать разные версии 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"
Топовый курс! Особенно понравилось, что разобрано много ошибок, которые могут встретиться при настройке кофигурации Webpack Добавлю, что при установке некоторых пакетов возникали другие ошибки типа: } catch {} SyntaxError: Unexpected token { Всё дело в том, что у меня более старая версия node. Если кто поймает такую ошибку, поищите на npmjs.com предыдущие версии пакета и поставьте его: npm i название_пакета@версия
2:43:20 У кого в Webpack 5 не работают динамические импорты вместе с lodash, то вместо "import('lodash').then(_ => {})" пишем "import('lodash').then(({ default: _ }) => {})"
Спасибо большое. Одно из самых дельных видео по Webpack. Правда на 2022 год видео немного устарело, некоторые конфигурации для некоторых плагинов пришлось переписать (это всё очень быстро нагуглилось и проблем не составило) и всё запускается и работает.
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" }
Досмотрел до конца, с моим графиком работы, все посмотреть и попробовать 90% материала ушла почти неделя. Спасибо Автору , он находка для тех кому html, css, изучение js c lernjavascript уже кажется банальностью.
Не знаю, как у вас, но у меня file-loader ломает картинку (она не открывается) при работе с CSS (например, при использовании в background-image). Нашел решение: не использовать file-loader :) Оказывается в webpack есть встроенный file-loader. Просто пропишите следующее правило, вместо правила на использования file-loader: { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource' }
1:47:08 У кого выдаёт "Automatic publicPath is not supported in this browser", пропишите в options: publicPath: (resourcePath, context) => { return path.relative(path.dirname(resourcePath), context) + '/'; }
хахахахах, такая же ошибка была, гуглил час, разобрался, хотел написать как решить эту проблему, и вдруг ты тут с таким же решением, ты где был час назад?)
Красавчик ! Спасибо! Я теперь твой постоянный зритель ) . Очень хорошо излагаешь - респект! Не пропускаю ни одного видоса ))). Webpack очень кстати - в наглядной форме закрыл некоторые пробелы в знаниях. Хотелось конечно еще бы увидеть тут про интеграцию с browsersync и адаптацию webpack для работы в связке с php ( в том числе и hmr), например при разработке wordpress-темы. Но это мои нескромные хотелки. А ваще, все твои курсы - это бомба!
Владилен, наткнулся на твой канал на днях, как раз надо было настраивать вебпак, скажу вот что: ты единственный, кто смог изложить материал так, что понятно абсолютно все, благодаря тебе я смог настроить все правильно. У тебя актуальная информация по вебпаку. Единственное, чего не хватило - это как расположить файлы в папке dist по категориям, структурировать, но думаю в документации я найду ответ. Спасибо тебе, я никогда не пишу комментарии, но это отдельный случай!
спасибо за видео! для тех у кого не пашет 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. Пока что они несовместимы без этого, по крайней мере, у меня ничего не вышло
Владилен, спасибо за видео. Все понятно, без лишней воды. Это мое первое видео на твоем канале, теперь знаю чем заняться на выходных. Жду с нетерпением видео по ESlint. А то толковых гайдов по ниму днем с огнем. Ты реально круто доносишь информацию. Еще раз спасибо.
Спасибо огромное за видео! Повторяла все, о чем ты рассказывал, не осталось ни одного вопроса, все максимально понятно!) То, что ты делаешь - нереальный труд и огромная инвестиция в будущих программистов)) Не представляю сколько времени тебе заняло научиться так четко и легко объяснять сложные вещи...Спасибо большое!))
Наконец полностью просмотрел данное видео. Это же колоссальная, великолепная работа. Если до видео смотришь на конфиг вэбпака: ээ пойду ка я отсюда, что то пугающе монструозное, вдруг что то сломаю. После видео: о так надо поправить это и это и я получу нужный результат. Еще раз спасибо.
Итак судя по всему в новой версии webpack на 26/11/20 нельзя запустить webpack-dev-server --open, во первых теперь команда выглядит так "start": "webpack serve", а для дополнительных опций, таких как открытие окна браузера переходим в конфиг и в module.exports{devServer: { open: true}}
1:57:00 - для этих целей не обязательно создавать функцию: в объекте optimization есть поле minimize, куда мы можем передать флаг и в случае false минификация происходить не будет. Т.е. можно сделать так: optimization: { minimize: isProd, minimizer: [ new OptimizeCssAssetsPlugin(), new TerserWebpackPlugin() ] } Но т.к. мы указываем мод, в котором запускаем вебпак, то даже явное указание флага не требуется: вебпак по дефолту не минифицирует в девелопмент режиме. (webpack.js.org/configuration/optimization/#optimizationminimize)
Чел ты лучший, я неделю назад много не понимал в js. На протяжение этой недели я смотрел твои видосы и с каждым днем js становился все понятнее и понятнее, щас досмотрю этот видос и начну vue. Тупа лучший, щас специально всем видосам лайки поставлю, даже те которые не смотрел
Владилену большое спасибо за видео, а для тех, у кого webpack 5 версии или более, и при установке optimize-css-assets-webpack-plugin ошибки, устанавливайте css-minimizer-webpack-plugin
Контент огонь! Я все писал под webpack5 -> немного гуглежки, немного чтения офф доки, и все завелось)) Это наверное даже полезнее было чем просто посмотреть видяшку и повторить за автором)) Автору респект, продолжай в том же духе)
Спасибо, за Работу, Владилен. Решил изучать реакт нэтив встретил этот канал. Купил курс и сэкономил очень много времени в изучении хотя никак не выберу время дойти екго до конца. На мой взгляд здесь самый качественный контэнт по фронтенду в рунете. Еще раз Спасибо!
@@dasi4301 да не "агрюсь" я. Просто вопросы найглупейшие. Понимаю теперь, что ты ещё подросток, судя по твоей фразе "агриться", однако пойми - в прогинге и разработке приложений нечего делать, если человек не умеет самостоятельно искать информацию, ибо это будет составлять минимум 70% всей твоей работы.
Спасибо за материал! Смотрел видео, попутно читая документацию, что, как понимаю из комментов, делал не зря, ибо за 2 года в вебпаке появились некоторые изменения
На конец то бл*ь, нормальное объяснение.jpg . Не очень люблю видео гайды, не удобно отматывать и искать что то повторить, но нормальных текстовых туториалов по вебпаку нет, от слова совсем. Но ваш туториал прям путеводная звезда! Хоть кто то в полном объеме объясняет что происходит, и что нужно делать. Спасибо за огромный труд.
Как всегда, супер: сложное становится простым, лучший туториал, чтобы начать осваивать вебпак. Как когда-то начал с Владиленом учить фронтэнд, так и часто делаю это сейчас, но теперь чтобы побыстрее добраться до миддла.
Сейчас file-loader для картинок и шрифтов не нужен, просто прописываете в конфиге test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', и test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', соответственно
Автору респект. Хорошее видео для новичка. Показаны все этапы сборки приложения. Не открыл для себя ничего нового, но жалею, что не было подобного видео когда начинал изучать webpack.
Для тех у кого проблемы с установкой 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!!! Спасибо владилен!! До конца ещё не досмотрел, однако все проблемы уже решил с вашей помощью!!! Обязательно досмотрю до конца, чтобы подчерпнуть ещё кучу разных фич!!
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.
Для тех у кого не работет webpack-dev-server (автообновление): В файле package.json команда start должна быть такой: "start": "webpack serve --open" В файле webpack.config.js настройки devServer должны быть такие: devServer: { port: 4200, watchFiles: ["./src/*"], },
Если вдруг возникнет проблема с MiniCssExtractPlugin Error: Automatic publicPath is not supported in this browser Получилось победить так: test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: path.resolve(__dirname, 'dist') }, } ,'css-loader' ]
@@dmitriysannikov6122 хм, у меня тоже была ошибка с подгрузкой изображений , но я думал на file-loader, а в итоге просто костылём всё решил. Писал background-image не в css файле, а в переменной в react и там в файле добавлял уже эту переменную к style блока . Надо будет проверить ваш вариант, спасибо.
У кого не работает webpack-dev-server, в конфиге нужно указать следующее: devServer: { open: true, hot: true, port: 'auto', static: { directory: './src', watch: true } } на январь 22 года всё работает
Отличный курс! Помог разобраться с базовыми вещами, и теперь не страшно смотреть в конфиги webpack-а на проектах) Большое спасибо, Владилен, ты большой молодец!
Влад, поздравляю тебя со 100к подписчиками! Ты делаешь колоссальную работу для огромного IT коммьюнити(В часности frontend и bakcend) и помогаешь многим понять сложные вещи, что невероятно классно. Продолжай также, пожалуйста, многие будут тебе благодарны:)
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
@@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)))
Большое тебе человеческое спасибо, мужик!! Очень полезно и информативно. Нет воды, приятно слушать, подача материала четкая и внятная. Это большая и качественная работа. Отблагодарил на ЯД, еще раз спасибо!
@@dizelvinable ну не совсем для бэк. можно использовать и для развертывания разных окружений разработки фронт. ну и локально несколько бэков иметь, для разработки под них фронт - тож актуально
Вот я заметил, что именно видео курсы про веб инструменты хорошо усваиваются , но что то потяжелее конечно эффективнее смешивать с книжным форматов. Но автору огромный респект, ознакомиться с новым инструментом так легко и не принужденно это определенно талант исполнителя играет роль. Получу зп. обязательно поддержу ваш канал! Успехов в учебе всем!(:
Владилен, (пользуясь случаем) огромное спасибо за курс!! Остался один непонятный момент: на этапе (45:55), когда мы настроили webpack, чтобы он автоматом подключал js-файлы в шаблоне html, у нас фактически поломался наш первоначальный шаблон... Т.к. в первоначальном шаблоне у нас analytics.[contenthash].js подключался в хедере, а не в конце body... Предположим нам это критически важно. Как сделать так, чтобы analytics.[contenthash].js (т.е. именно с хешем в названии) отдельно подключался в хедере?
Владилен, спасибо за урок! Несмотря на то, что некоторые параметры уже записывать немного по другому, видео очень помогло. Урок классный, понятно изложен материал!!!
Владлен, спасибо за материал. Очень помогло в изучении webpack. Сегодня проработал с учетом Webpack 5 и изменений в плагинах. Форкнул вашу сборку и ввел изменения. Вот что получилось в результате: github.com/Armer7/webpack-2020
Люди, у которых в 2:41:35 возникает вот такая ошибка: TypeError: Cannot read properties of undefined (reading 'getFormatter') - нужно установить npm пакет вот такой версии "eslint": "^7.13.0" и запустить заново
Как всегда супер! Друзья, давайте поможем Владилену с продвижением, он трудится, хорошо объясняет, уверен вы согласитесь со мной что пришло время нам его отблагодарить. Делитесь его видео в соцсетях. Я уже.
Исходники тут: t.me/js_by_vladilen/125
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Лучший гайд!!! Ждём обновления под версию 5.
Долго выбирал материал для этого ролика и постарался в нем учесть все ваши пожелания :)
Приятного обучения и просмотра!
Большое спасибо за курс! То, что сейчас нужно.
Владилен, огромное спасибо!!! А вы могли бы добавить таймкоды?
Большое спасибо! Надеюсь всё же дождусь курс от тебя по NgRx и ещё что-нибудь по Angular)))
как обычно, красавчик просто) спасибо огромное). Лайк поставил, к просмотру позже, не успеваю за твоим контентом)
@@ИгорьШироков-ц1т Спасибо! Сейчас гляну)
Проблема с дублированием файлов (png, fonts).
Вместо use: 'file-loader' используйте type: 'asset/resource' - это нововведение (относительное) Webpack, которое помогает избежать данной ошибки. Подробнее можно узнать в документации Webpack в разделе asset-modules, там все кристально объяснено.
по делу коммент, помог
Супер, спасибо помог!
Святой человек, помог!
@@ВладиславКравченко-б4ч На небе есть отдельное облако для тех, кто кидает годноту в комментах)))
@@strange_man317 места рядом с типами со стек оверфлоу
У кого возникает проблема с CopyWebpackPlugin - там теперь в plugins нужно писать немного иначе:
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/favicon.ico'),
to: path.resolve(__dirname, 'dist')
}
]
})
Спасибо тебе, добрый человек
Как же подгорает от вебпак мира! Не успел добраться до годного курса, как уже что-то в синтаксисе поменялось.
@@technobydlo6093 по этому документация лучше любых курсов
спосибо
Спасибо! Ваш комментарий очень помог!
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 прошла.
Это мой третий подход к Webpack - у ! Оказывается он совсем не такой страшный! Владилен у тебя талант делать сложные вещи простыми!
он вновь становится страшным после каждого braking changes обновления...
это сарказм?
для webpack-dev-server:
"start": "webpack serve --mode development --open"
спасибо
Спасибо помогло
Спасибо.
Спасибо
спасибо!!
касательно "Автоматизации копирования статических файлов" 1:41:21
После обновления до 3.11 появился новый шаблон , следующая запись теперь должна выглядеть вот так:
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "src/favicon.ico"),
to: path.resolve(__dirname, "dist")
},
]
})
Дай бог вам здоровья
почему?
Спасибо.
Спасибо. А то устал с этой частью разбираться, что не так.
в Webpack 5 теперь нужно немного поправить devtool - вместо пустых кавычек '' подставить false
devtool: isDev ? 'source-map' : false
Спасибо!
Спасибо, помогло!!
Спасибо большое, мне помогло!))
Просто лучший курс по вебпаку! 3 дня по 10 часов рыл все что можно, ничего не получалось, посмотрел твой курс в 3 часа и все получилось) спасибо тебе!
Спасибо за отличное видео, оно дает полное представление о работе 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 спасибо)
Ты герой современного программирования!
@@ne4to777 У зоракса немного другой подход
Видео просто 11/10. Просмотрел курс за один присест на скорости 2х. Хочу отметить, что у Вас очень четкая речь и на такой скорости я могу прекрасно понимать, что Вы говорите. Спасибо большое!
Лайк не глядя, когда понимаешь, что следующие три часа пройдут офигенно
Приятного просмотра)
поддерживаю!
3*4 если пробовать и изучать
Абсолютно согласна🤩
до сих пор лучшее видео про вебпак на ютубе
Я сам не досмотрел видео от Ulbi и пришел сюда, здесь подача комофртнее. Владилен обьясняет лучше.
Влад, твои курсы очень помогают подтягиваться по стэку, а вебпак прямо вишенка на торте) Огромное спасибо)
Рад слышать)
59:50 *Подгрузить JSON и JavaScript*
Вероятно следует уточнить этот вопрос, потому как для многих он не до конца прозрачен.
В самом JS нет ни возможности прочитать файл, ни тем более получить что-то удаленно.
Этот функционал импортируется разными сторонними API, в зависимости от условий в которых работает JS.
В случае node это FSReqCallback который является оберткой вокруг uv_fs_* функций из C++
В случае браузерной среды, можно использовать xhr api с пришедшим ему на смену fetch api.
А для чтения локальных файлов, вполне уже можно использовать Filesystem Api.
В случае какого нибудь китайского чайника с js на борту может вообще не быть никаких аналогов.
Важно всегда проводить эту границу, чтобы вдруг потом не удивляться почему это в Node нет Fetch
Если пишете в 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... и т.д. Интернет выдает много, да всё не то. Хорошо что мелькнула мысль заглянуть сюда в этот чат. Огромное спасибо.
Ну как бы ура. наконец-то вменяемый человек адекватным языком объясняет, что и зачем в нужном объеме для понимания, но не слишком глубоко, чтобы не чувствовать себя полным критином. Спасибо Владилен. Чисто, Ясно, Информативно и можно сразу брать на вооружение.
Отличный курс, спасибо большое!
Есть пара вопросов
1) Как вставлять картинки через img? Путь указывать относительно исходного индекса или от скомпиленого?
2) Как в папке dist сохранить удобную структуру - папки со скриптами, стилями, картинками и т.п.
Нашел решение?
@@nikolakovac65 Нашел решение?
@@KG-eo1mg Есть решение?
@@nikolakovac65 Не нашёл решения?
@@nikolakovac65 webpack.js.org/configuration/entry-context/#entry
Ура!!! Поздравьте меня! Три дня назад жаловался здесь, что не осилил этот курс и вернусь к нему позже. Но, блин, не тот человек походу. Как так - это первая технология которая мне не покорилась, да ну нафиг - быть такого не может...
В итоге в пятницу кое-как дождавшись окончания работы, начал искать - в чём дело. В итоге: почистил линукс(а он у меня на виртуалке), пересмотрел ещё другие видео по Вебпаку, более раннего периода, в том числе и Владилена, но более раннее на другом канале, так-же Дмитрия Лаврика, ещё кого-то. Всё повторял, ничего не выходило. Перечитал кучу рекоммендаций. В конце концов научился устанавливать и использовать разные версии 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"
Вот что такое "шок контент"... Владилен, ты просто мега крут
Это один из лучших курсов. Автор делает большой охват материала, давая понять принципы работы Webpack. Материал очень качественный.
Как обычно - лайк не глядя! Уверен, что контет самый лучший, как обычно!
Топовый курс! Особенно понравилось, что разобрано много ошибок, которые могут встретиться при настройке кофигурации Webpack
Добавлю, что при установке некоторых пакетов возникали другие ошибки типа:
} catch {}
SyntaxError: Unexpected token {
Всё дело в том, что у меня более старая версия node. Если кто поймает такую ошибку, поищите на npmjs.com предыдущие версии пакета и поставьте его:
npm i название_пакета@версия
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 не появился. Хотя все работает.
Спасибо большое. Одно из самых дельных видео по Webpack. Правда на 2022 год видео немного устарело, некоторые конфигурации для некоторых плагинов пришлось переписать (это всё очень быстро нагуглилось и проблем не составило) и всё запускается и работает.
Давай ESLint) И Jest было бы неплохо :)
А видео топ! Спасибо)
я за
я тоже
поддерживаю
+ 1 и еще Jest + React
+1!
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"
}
Если у кого не работает SASS на 2:07:10 : попробуйте переписать вместо
test: /\.s[ac]ss$/,
на
test: /\.(sass|scss)$/,
В моем случае помогла следующая строка: test: /\.sass$|scss/,
Досмотрел до конца, с моим графиком работы, все посмотреть и попробовать 90% материала ушла почти неделя. Спасибо Автору , он находка для тех кому html, css, изучение js c lernjavascript уже кажется банальностью.
Не знаю, как у вас, но у меня 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 все работало, и я не сразу понял, что сломалось именно из-за этого.
с JQuery будет работать, если вызвать функцию после render React. Но текст должен потеряться при перерисовке.
clean-webpack-plugin в пятом вебпаке уже не нужен, можно просто в output прописать настройку clean: true
Владилен, огромнейшее спасибо! Это космос.) Каналу в топ осталось пожелать, а плюсов в карму ты и так дофига заработал; ))
1:47:08 У кого выдаёт "Automatic publicPath is not supported in this browser", пропишите в options:
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + '/';
}
Спасибо за помощь
хахахахах, такая же ошибка была, гуглил час, разобрался, хотел написать как решить эту проблему, и вдруг ты тут с таким же решением, ты где был час назад?)
Спасибо! ))
Красавчик ! Спасибо! Я теперь твой постоянный зритель ) . Очень хорошо излагаешь - респект! Не пропускаю ни одного видоса ))). Webpack очень кстати - в наглядной форме закрыл некоторые пробелы в знаниях. Хотелось конечно еще бы увидеть тут про интеграцию с browsersync и адаптацию webpack для работы в связке с php ( в том числе и hmr), например при разработке wordpress-темы. Но это мои нескромные хотелки. А ваще, все твои курсы - это бомба!
Спустя 3ч. "Ура, мы закончили с базой вебпака"
ААААААААААААА
Владилен, наткнулся на твой канал на днях, как раз надо было настраивать вебпак, скажу вот что: ты единственный, кто смог изложить материал так, что понятно абсолютно все, благодаря тебе я смог настроить все правильно. У тебя актуальная информация по вебпаку. Единственное, чего не хватило - это как расположить файлы в папке dist по категориям, структурировать, но думаю в документации я найду ответ. Спасибо тебе, я никогда не пишу комментарии, но это отдельный случай!
Спасибо, из всех кого я когда-либо смотрел, твои видео самые понятные и их приятно смотреть
спасибо за видео! для тех у кого не пашет 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. Пока что они несовместимы без этого, по крайней мере, у меня ничего не вышло
Уфффф) Просто лайк не глядя! UPD: было бы круто разобрать и Eslint
Владилен, спасибо за видео. Все понятно, без лишней воды. Это мое первое видео на твоем канале, теперь знаю чем заняться на выходных. Жду с нетерпением видео по ESlint. А то толковых гайдов по ниму днем с огнем. Ты реально круто доносишь информацию. Еще раз спасибо.
Спасибо огромное за видео! Повторяла все, о чем ты рассказывал, не осталось ни одного вопроса, все максимально понятно!) То, что ты делаешь - нереальный труд и огромная инвестиция в будущих программистов)) Не представляю сколько времени тебе заняло научиться так четко и легко объяснять сложные вещи...Спасибо большое!))
Наконец полностью просмотрел данное видео. Это же колоссальная, великолепная работа. Если до видео смотришь на конфиг вэбпака: ээ пойду ка я отсюда, что то пугающе монструозное, вдруг что то сломаю. После видео: о так надо поправить это и это и я получу нужный результат. Еще раз спасибо.
Итак судя по всему в новой версии webpack на 26/11/20 нельзя запустить webpack-dev-server --open, во первых теперь команда выглядит так "start": "webpack serve", а для дополнительных опций, таких как открытие окна браузера переходим в конфиг и в module.exports{devServer: {
open: true}}
спасибо тебе!!! помогло!!!
1:57:00 - для этих целей не обязательно создавать функцию: в объекте optimization есть поле minimize, куда мы можем передать флаг и в случае false минификация происходить не будет. Т.е. можно сделать так:
optimization: {
minimize: isProd,
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserWebpackPlugin()
]
}
Но т.к. мы указываем мод, в котором запускаем вебпак, то даже явное указание флага не требуется: вебпак по дефолту не минифицирует в девелопмент режиме. (webpack.js.org/configuration/optimization/#optimizationminimize)
Когда шёл на TH-cam за обучалками по Webpack - прямо таки молился, чтоб у Владилена Минина был такой контент ) пушка! Спасибо!
Клёвый курс, мне раньше вебпак казался сложным и я не понимал зачем он нужен, но теперь мое мнение изменилось и вебпак мне кажется удобным и полезным
Пожалуйста сделай курс по Webpack 5
а в видео разбирался лоадер для pug?
просто лень искать
@@timofeysyr5163 нет
Чел ты лучший, я неделю назад много не понимал в js. На протяжение этой недели я смотрел твои видосы и с каждым днем js становился все понятнее и понятнее, щас досмотрю этот видос и начну vue. Тупа лучший, щас специально всем видосам лайки поставлю, даже те которые не смотрел
Рад слышать)
Владилену большое спасибо за видео, а для тех, у кого webpack 5 версии или более, и при установке optimize-css-assets-webpack-plugin ошибки, устанавливайте css-minimizer-webpack-plugin
Да хранит тебя Аллах, мил человек )
Контент огонь!
Я все писал под webpack5 -> немного гуглежки, немного чтения офф доки, и все завелось))
Это наверное даже полезнее было чем просто посмотреть видяшку и повторить за автором))
Автору респект, продолжай в том же духе)
Спасибо, за Работу, Владилен. Решил изучать реакт нэтив встретил этот канал. Купил курс и сэкономил очень много времени в изучении хотя никак не выберу время дойти екго до конца. На мой взгляд здесь самый качественный контэнт по фронтенду в рунете. Еще раз Спасибо!
Владилен, спасибо большое! Давно слежу за вашей работой и подписан, понадобилось вспомнить и сразу подумал что здесь найду лучшее и не ошибся!
Тупо лучший ютубер!!! Пишу любой запрос по js и открывается именно твое видео, есть просто все что нужно! Респект
Для тех кто смотрит в 2021 hmr больше прописывать не надо!
@@dasi4301 у мамы спросил. А как ты думаешь где?) Может быть на официальном сайте webpack, который регулярно обновляется?)
@@dasi4301 да не "агрюсь" я. Просто вопросы найглупейшие. Понимаю теперь, что ты ещё подросток, судя по твоей фразе "агриться", однако пойми - в прогинге и разработке приложений нечего делать, если человек не умеет самостоятельно искать информацию, ибо это будет составлять минимум 70% всей твоей работы.
щастья, здоровьечка тебе, добрый путник, ты сэкономил мне кучу времени и нервов)
Спасибо за материал! Смотрел видео, попутно читая документацию, что, как понимаю из комментов, делал не зря, ибо за 2 года в вебпаке появились некоторые изменения
Ого, оч качественно классно информативно. Не хотелось как-то начинать с webpack`ом разбираться, а оказалось, что эти знания супер полезные
На конец то бл*ь, нормальное объяснение.jpg .
Не очень люблю видео гайды, не удобно отматывать и искать что то повторить, но нормальных текстовых туториалов по вебпаку нет, от слова совсем.
Но ваш туториал прям путеводная звезда! Хоть кто то в полном объеме объясняет что происходит, и что нужно делать. Спасибо за огромный труд.
как же он хорош...
чел, ты настоящий учитель!
материал очень хорошо разжеван, осталось только переварить
Владилен круто будет увидеть ролик по eslint настроеный и видео по тестам на jest
Владилен, спасибище! Я на ваших видео прям прокачася по многим темам! Патерны, вебпак, промисы, фетч. все огонь!
С развитием вашего канала все директора платных курсов плачут и с валерьянкой "ждут" новых выпусков) спасибо за ваш труд!
Как всегда, супер: сложное становится простым, лучший туториал, чтобы начать осваивать вебпак. Как когда-то начал с Владиленом учить фронтэнд, так и часто делаю это сейчас, но теперь чтобы побыстрее добраться до миддла.
Сейчас file-loader для картинок и шрифтов не нужен, просто прописываете в конфиге test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', и test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', соответственно
Давно хотел разобраться с кучей ключей-конфигов для Webpack и очень рад, что нашел это видео! Спасибо большое, Владилен!
Владилен, твои туториалы - просто огонь, спасибо тебе большое за твою работу, ты прям нереально помогаешь к собесам готовиться!
Автору респект. Хорошее видео для новичка. Показаны все этапы сборки приложения. Не открыл для себя ничего нового, но жалею, что не было подобного видео когда начинал изучать webpack.
Для тех у кого проблемы с установкой optimize-css-assets-webpack-plugin, установите его вот таким способом:
1) npm i -D optimize-css-assets-webpack-plugin@4.0.0
2) npm audit fix --force
И тогда в packege.json появится этот плагин последней версии
Помогло спасибо!
Переслушивал учебный материал по нескольку раз, и каждый раз находил пропущенные мимо ушей полезности. Каждый комментарий по делу! Выражаю огромное уважение Владилену. Спасибо!
В этом видео и я правда очень много сконцентрировал)
Очень подробно и хорошо всё разжевано и в рот положено)) то что доктор прописал, уже не первый раз пытался разобраться с вебпаком, но до этого все было безуспешно, спасибо от души!!!
жжошь Влад, 3 часа информативного контента!
Сам удивился, что так много подготовил)
Владилен Минин я не успеваю твои старые ролики пересмотреть, пока штудирую старое - выходит новое. Вот это уровень
@@johnd1431 И мы только начинаем)
Это просто нереально крутой и нереально подробный курс по 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.
Для тех у кого не работет webpack-dev-server (автообновление):
В файле package.json команда start должна быть такой:
"start": "webpack serve --open"
В файле webpack.config.js настройки devServer должны быть такие:
devServer: {
port: 4200,
watchFiles: ["./src/*"],
},
Большое спасибо за рабочее решение! =)
Если вдруг возникнет проблема с 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',
],
},
@@ЭйЭй-ы1и Спасибо)
Такое классное видео! Наконец-то начал понимать для чего нужен webpack и как он работает! Спасибо огромное за труд!!!
У кого не работает webpack-dev-server, в конфиге нужно указать следующее:
devServer: {
open: true,
hot: true,
port: 'auto',
static: {
directory: './src',
watch: true
}
}
на январь 22 года всё работает
Как всегда приятно обучаться по твоему контенту, все четко, грамотно и понятно. Спасибо Владилен.
1:09:00 ! Для тех людей, у которых создаётся лишняя картинка, нужно в конфиге вместо use: ['file-loader'] написать type: 'asset/resource'
Работает, а почему так ?
@@Космик-ъ3е webpack 5 версии решил сделать их из коробки, для упрощения работы с другими созависимыми модулями.
спасибо!
Спасибо:)
Спасибо
Отличный курс! Помог разобраться с базовыми вещами, и теперь не страшно смотреть в конфиги webpack-а на проектах) Большое спасибо, Владилен, ты большой молодец!
Я человек простой, вижу твои видосы - сначала лайкаю, а потом смотрю xd
Классный алгоритм)
Аналогично.
Я вообще как зашел на канал завис по полной. Не могу оторваться.
TH-cam плохо относится в видео, которые лайкают до просмотра. Поэтому посмотри хотя бы до половины перед лайком
@@VladilenMinin ну вообще, говорят что ютьюб не засчитывает лайк, если сначала его ставишь, а потом смотришь видос. Так что в алгоритме баг завёлся)
Влад, поздравляю тебя со 100к подписчиками! Ты делаешь колоссальную работу для огромного IT коммьюнити(В часности frontend и bakcend) и помогаешь многим понять сложные вещи, что невероятно классно. Продолжай также, пожалуйста, многие будут тебе благодарны:)
Благодарю)
Для CopyWebPackPlugin
plugins: [
new CopyPlugin({
patterns: [
{ from: 'source', to: 'dest' },
{ from: 'other', to: 'public' },
],
}),
],
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
Время 1:42:13
Для тех, кто делает так же как в уроке:
new CopyWebpackPlugin({
patterns: [
{ from: 'favicon.ico', to: '../dist' },
],
}),
Или поставить версию copy-webpack-plugin ^5.1.1
@@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)))
Большое тебе человеческое спасибо, мужик!!
Очень полезно и информативно.
Нет воды, приятно слушать, подача материала четкая и внятная.
Это большая и качественная работа.
Отблагодарил на ЯД, еще раз спасибо!
То что нужно) будет что то о Docker-е ??
Докер - это же бекенд. А так - было бы очень интересно тоже посмотреть.
@@dizelvinable И что, что бэкенд?) Автор так же учит ноде
@@Levelord92 ааа, тогда супер) Надеюсь, скоро будет) А то разные видео про докер смотрел, но всё равно остаётся много вопросов.
@@dizelvinable ну не совсем для бэк. можно использовать и для развертывания разных окружений разработки фронт. ну и локально несколько бэков иметь, для разработки под них фронт - тож актуально
@@dmitryfokin5205 Ясно, спасибо)
Наконец-то нормальный курс по Webpack! Автору благодарность! :-) Конечно, хорошо бы ещё одно видео по последней версии... много поменялось.
01:52:06 Если проблема
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {},
},
И как быть?
Вот я заметил, что именно видео курсы про веб инструменты хорошо усваиваются , но что то потяжелее конечно эффективнее смешивать с книжным форматов.
Но автору огромный респект, ознакомиться с новым инструментом так легко и не принужденно это определенно талант исполнителя играет роль. Получу зп. обязательно поддержу ваш канал! Успехов в учебе всем!(:
Владилен, (пользуясь случаем) огромное спасибо за курс!!
Остался один непонятный момент:
на этапе (45:55), когда мы настроили webpack, чтобы он автоматом подключал js-файлы в шаблоне html,
у нас фактически поломался наш первоначальный шаблон...
Т.к. в первоначальном шаблоне у нас analytics.[contenthash].js подключался в хедере, а не в конце body...
Предположим нам это критически важно. Как сделать так, чтобы analytics.[contenthash].js (т.е. именно с хешем в названии) отдельно подключался в хедере?
разобрался?
Самый полный и понятный ролик по вебпак. От души, всех благ тебе
вот это огонь, СПАСИБО!
Благодарю. Все доступно и понятно, без лишней воды. Просмотрел на одном дыхании. Краткий конспект на 3 страницы вышел.
Владилен, спасибо за урок! Несмотря на то, что некоторые параметры уже записывать немного по другому, видео очень помогло. Урок классный, понятно изложен материал!!!
Владлен, спасибо за материал. Очень помогло в изучении webpack. Сегодня проработал с учетом Webpack 5 и изменений в плагинах. Форкнул вашу сборку и ввел изменения. Вот что получилось в результате: github.com/Armer7/webpack-2020
Armen Спасибо!!!
Большое спасибо вам, вы мне помогли победить одну проблему с babel
Спасибо, воспользовалась вашим кодом)
Люди, у которых в 2:41:35 возникает вот такая ошибка:
TypeError: Cannot read properties of undefined (reading 'getFormatter') - нужно установить npm пакет вот такой версии "eslint": "^7.13.0" и запустить заново
Владилен, сделай пожалуйста курс на Webpack 5, много чего уже поменялось
Лайк, чтобы в топ
а какой смысл? чуть меняется синтаксис , а в целом в данном видео понятна вся суть и механика пакета
Как всегда супер!
Друзья, давайте поможем Владилену с продвижением,
он трудится, хорошо объясняет, уверен вы согласитесь со мной что пришло время нам его отблагодарить.
Делитесь его видео в соцсетях. Я уже.