Video není dostupné.
Omlouváme se.
Webpack. Full Course 2020
Vložit
- čas přidán 17. 08. 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_b...
Instagram: / vladilen.minin
VK: vladile...
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_b...
Support new videos:
Yandex Money: money.yandex.r...
PayPal: www.paypal.me/...
Webpack. Full Course 2020
#webpack #js #javascript
Исходники тут: t.me/js_by_vladilen/125
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Лучший гайд!!! Ждём обновления под версию 5.
Долго выбирал материал для этого ролика и постарался в нем учесть все ваши пожелания :)
Приятного обучения и просмотра!
Большое спасибо за курс! То, что сейчас нужно.
Владилен, огромное спасибо!!! А вы могли бы добавить таймкоды?
Большое спасибо! Надеюсь всё же дождусь курс от тебя по NgRx и ещё что-нибудь по Angular)))
как обычно, красавчик просто) спасибо огромное). Лайк поставил, к просмотру позже, не успеваю за твоим контентом)
@@user-fx3of4zx6s Спасибо! Сейчас гляну)
У кого возникает проблема с CopyWebpackPlugin - там теперь в plugins нужно писать немного иначе:
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/favicon.ico'),
to: path.resolve(__dirname, 'dist')
}
]
})
Спасибо тебе, добрый человек
Как же подгорает от вебпак мира! Не успел добраться до годного курса, как уже что-то в синтаксисе поменялось.
@@technobydlo6093 по этому документация лучше любых курсов
спосибо
Спасибо! Ваш комментарий очень помог!
Проблема с дублированием файлов (png, fonts).
Вместо use: 'file-loader' используйте type: 'asset/resource' - это нововведение (относительное) Webpack, которое помогает избежать данной ошибки. Подробнее можно узнать в документации Webpack в разделе asset-modules, там все кристально объяснено.
по делу коммент, помог
Супер, спасибо помог!
Святой человек, помог!
@@user-gc2ez7zb1f На небе есть отдельное облако для тех, кто кидает годноту в комментах)))
@@strange_man317 места рядом с типами со стек оверфлоу
Это мой третий подход к Webpack - у ! Оказывается он совсем не такой страшный! Владилен у тебя талант делать сложные вещи простыми!
он вновь становится страшным после каждого braking changes обновления...
это сарказм?
в Webpack 5 теперь нужно немного поправить devtool - вместо пустых кавычек '' подставить false
devtool: isDev ? 'source-map' : false
Спасибо!
Спасибо, помогло!!
Спасибо большое, мне помогло!))
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.
Теперь не нужно искать тот самый сакральный конфиг ))
Немного из 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 У зоракса немного другой подход
Лайк не глядя, когда понимаешь, что следующие три часа пройдут офигенно
Приятного просмотра)
поддерживаю!
3*4 если пробовать и изучать
Абсолютно согласна🤩
для webpack-dev-server:
"start": "webpack serve --mode development --open"
спасибо
Спасибо помогло
Спасибо.
Спасибо
спасибо!!
Видео просто 11/10. Просмотрел курс за один присест на скорости 2х. Хочу отметить, что у Вас очень четкая речь и на такой скорости я могу прекрасно понимать, что Вы говорите. Спасибо большое!
касательно "Автоматизации копирования статических файлов" 1:41:21
После обновления до 3.11 появился новый шаблон , следующая запись теперь должна выглядеть вот так:
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "src/favicon.ico"),
to: path.resolve(__dirname, "dist")
},
]
})
Дай бог вам здоровья
почему?
Спасибо.
Спасибо. А то устал с этой частью разбираться, что не так.
clean-webpack-plugin в пятом вебпаке уже не нужен, можно просто в output прописать настройку clean: true
Вместо use ['file-loader'] для лоадеров пишите: type: 'asset/resource'
Например:
{
test: /\.(png|jpe?g|svg|gif)$/,
type: 'asset/resource'
},
У кого не работает devServer пишите так:
devServer: {
static: {
directory: './src',
},
port: 4200,
},
Для copy-webpack-plugin:
new CopyWebpackPlugin({
patterns: [
{from: './assets/favicon.ico', to: ''}
]
})
где from это путь к файлу, а to это куда надо перенести. Если нужна отдельная папка в папке dist то вписываем название, если нет оставляем кавычки пустыми
optimize-css-assets-webpack-plugin не заработал, для минификации css в production используйте данный код:
//установить
npm install css-minimizer-webpack-plugin --save-dev
//подключить
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
и вот кусочек кода для функции optimization.
if (!isDev) [
config.minimizer = [
new CssMinimizerPlugin(),
new TerserWebpackPlugin(),
]
]
Babel сейчас подключается так:
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
}
},
Еще в корневом каталоге проекта я создал файл babel.config.json и вписал в него
{
"presets": ["@babel/preset-env"]
}
Спасибо добрый человек!!!
А сам лоадер file-loader тогда нужен? Update: file-loader вообще больше не нужен.
css не работает
@@user-lm9nr4eo2f может еще что поменяли)
Спасибо огромное!
Просто лучший курс по вебпаку! 3 дня по 10 часов рыл все что можно, ничего не получалось, посмотрел твой курс в 3 часа и все получилось) спасибо тебе!
Давай 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"
}
Не знаю, как у вас, но у меня 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-dev-server, в конфиге нужно указать следующее:
devServer: {
open: true,
hot: true,
port: 'auto',
static: {
directory: './src',
watch: true
}
}
на январь 22 года всё работает
25:24 npx webpack так компилируется сейчас
Если пишете в 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... и т.д. Интернет выдает много, да всё не то. Хорошо что мелькнула мысль заглянуть сюда в этот чат. Огромное спасибо.
Спустя 3ч. "Ура, мы закончили с базой вебпака"
ААААААААААААА
Для тех у кого проблемы с установкой optimize-css-assets-webpack-plugin, установите его вот таким способом:
1) npm i -D optimize-css-assets-webpack-plugin@4.0.0
2) npm audit fix --force
И тогда в packege.json появится этот плагин последней версии
Помогло спасибо!
Отличный курс, спасибо большое!
Есть пара вопросов
1) Как вставлять картинки через img? Путь указывать относительно исходного индекса или от скомпиленого?
2) Как в папке dist сохранить удобную структуру - папки со скриптами, стилями, картинками и т.п.
Нашел решение?
@@nikolakovac65 Нашел решение?
@@KG-eo1mg Есть решение?
@@nikolakovac65 Не нашёл решения?
@@nikolakovac65 webpack.js.org/configuration/entry-context/#entry
Как обычно - лайк не глядя! Уверен, что контет самый лучший, как обычно!
Для тех у кого не работет webpack-dev-server (автообновление):
В файле package.json команда start должна быть такой:
"start": "webpack serve --open"
В файле webpack.config.js настройки devServer должны быть такие:
devServer: {
port: 4200,
watchFiles: ["./src/*"],
},
Большое спасибо за рабочее решение! =)
Это один из лучших курсов. Автор делает большой охват материала, давая понять принципы работы Webpack. Материал очень качественный.
Для тех кто смотрит в 2021 hmr больше прописывать не надо!
@@dasi4301 у мамы спросил. А как ты думаешь где?) Может быть на официальном сайте webpack, который регулярно обновляется?)
@@dasi4301 да не "агрюсь" я. Просто вопросы найглупейшие. Понимаю теперь, что ты ещё подросток, судя по твоей фразе "агриться", однако пойми - в прогинге и разработке приложений нечего делать, если человек не умеет самостоятельно искать информацию, ибо это будет составлять минимум 70% всей твоей работы.
щастья, здоровьечка тебе, добрый путник, ты сэкономил мне кучу времени и нервов)
На конец то бл*ь, нормальное объяснение.jpg .
Не очень люблю видео гайды, не удобно отматывать и искать что то повторить, но нормальных текстовых туториалов по вебпаку нет, от слова совсем.
Но ваш туториал прям путеводная звезда! Хоть кто то в полном объеме объясняет что происходит, и что нужно делать. Спасибо за огромный труд.
Топовый курс! Особенно понравилось, что разобрано много ошибок, которые могут встретиться при настройке кофигурации Webpack
Добавлю, что при установке некоторых пакетов возникали другие ошибки типа:
} catch {}
SyntaxError: Unexpected token {
Всё дело в том, что у меня более старая версия node. Если кто поймает такую ошибку, поищите на npmjs.com предыдущие версии пакета и поставьте его:
npm i название_пакета@версия
Как всегда супер!
Друзья, давайте поможем Владилену с продвижением,
он трудится, хорошо объясняет, уверен вы согласитесь со мной что пришло время нам его отблагодарить.
Делитесь его видео в соцсетях. Я уже.
Итак судя по всему в новой версии webpack на 26/11/20 нельзя запустить webpack-dev-server --open, во первых теперь команда выглядит так "start": "webpack serve", а для дополнительных опций, таких как открытие окна браузера переходим в конфиг и в module.exports{devServer: {
open: true}}
спасибо тебе!!! помогло!!!
Вот что такое "шок контент"... Владилен, ты просто мега крут
Досмотрел до конца, с моим графиком работы, все посмотреть и попробовать 90% материала ушла почти неделя. Спасибо Автору , он находка для тех кому html, css, изучение js c lernjavascript уже кажется банальностью.
спасибо за видео! для тех у кого не пашет 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. Пока что они несовместимы без этого, по крайней мере, у меня ничего не вышло
Подписывайтесь на мой инстаграм: instagram.com/vladilen.minin/
Здравствуйте, с удовольствием смотрю, пишу, повторяю за Вами основы js. Какой курс выбрать ..базовый или есть может что-то попродвинутей?
Марина Гайдукевич jsexcel.ru идеально подойдет
@@NextgenSocialReptile последнее уточнение...Это три блока курса, начиная с базового. 80 тыс руб. Правильно? Увидела полтора месяца, это один блок курса? Сколько по времени длится весь курс?
Спасибо.
Марина Гайдукевич нет, весь курс можно взять за 10. Если нужны ещё опции то для этого другие пакеты)
как называется тема в vscode подскажите
Чтобы заработал wepback-dev-server попробуйте в конфиге прописать devServer: { static: './src' } и в package.json прописать команду "start": "webpack server --open"
dev server не работал лайв релоад, исправил конфиг на:
devServer: {
hot:false,
liveReload: true
},
а в package.json:
"start": "webpack-dev-server --mode development --open"
thank you bro,it really helped!)
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 не появился. Хотя все работает.
Если у кого не работает SASS на 2:07:10 : попробуйте переписать вместо
test: /\.s[ac]ss$/,
на
test: /\.(sass|scss)$/,
В моем случае помогла следующая строка: test: /\.sass$|scss/,
С развитием вашего канала все директора платных курсов плачут и с валерьянкой "ждут" новых выпусков) спасибо за ваш труд!
Ура!!! Поздравьте меня! Три дня назад жаловался здесь, что не осилил этот курс и вернусь к нему позже. Но, блин, не тот человек походу. Как так - это первая технология которая мне не покорилась, да ну нафиг - быть такого не может...
В итоге в пятницу кое-как дождавшись окончания работы, начал искать - в чём дело. В итоге: почистил линукс(а он у меня на виртуалке), пересмотрел ещё другие видео по Вебпаку, более раннего периода, в том числе и Владилена, но более раннее на другом канале, так-же Дмитрия Лаврика, ещё кого-то. Всё повторял, ничего не выходило. Перечитал кучу рекоммендаций. В конце концов научился устанавливать и использовать разные версии 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"
Клёвый курс, мне раньше вебпак казался сложным и я не понимал зачем он нужен, но теперь мое мнение изменилось и вебпак мне кажется удобным и полезным
Огромное спасибо за урок!!! Не без страданий и гуглёжа, но я его осилил и многое понял!
Пометки из 2023:
1) если у вас стоит расширение jshint - удаляйте его НЕЗАМЕДЛИТЕЛЬНО! (из-за него я настрадался при подключении React)
2) по BundleAnalizerPlugin - может не сработать, а вернее не сработает, если импортируете так, как показано в уроке. Делайте так:
- const BundleAnalizerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
3) решения по остальным несостыковкам, возникающим в связи с развитием webpack с момента записи урока - ищите в комментариях
1:09:00 ! Для тех людей, у которых создаётся лишняя картинка, нужно в конфиге вместо use: ['file-loader'] написать type: 'asset/resource'
Работает, а почему так ?
@@user-sr8eo3ct9h webpack 5 версии решил сделать их из коробки, для упрощения работы с другими созависимыми модулями.
спасибо!
Спасибо:)
Спасибо
Владилену большое спасибо за видео, а для тех, у кого webpack 5 версии или более, и при установке optimize-css-assets-webpack-plugin ошибки, устанавливайте css-minimizer-webpack-plugin
Да хранит тебя Аллах, мил человек )
до сих пор лучшее видео про вебпак на ютубе
Я сам не досмотрел видео от Ulbi и пришел сюда, здесь подача комофртнее. Владилен обьясняет лучше.
Для тех у кого будет ошибка что "webpack module not found" или что "zsh не знает такой команды webpack" : как вариант решения - вам нужно установить webpack + webpack-cli + webpack-dev-server глобально с помощью команды " sudo npm i -g webpack webpack-cli webpack-dev-server " теперь можете (находясь в папке проэкта) запускать команду webpack и получите результат такой же как в видео )
Всем добра, Владилену - спасибо за годный контент
Ты крут !
не обязательно глобально ставить вебпак, можно использовать npm утилиту - npx. Установить пакет, потом запускать - Например npx webpack
кто смотрит в 2022 году. Теперь babel можно установить так: npm install -D babel-loader @babel/core @babel/preset-env webpack. А в конфиге сделать так: {
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
И тогда babel будет понимать и асинхронную функцию и отобразит Util.id без дополнительных настроек
Если вдруг возникнет проблема с MiniCssExtractPlugin
Error: Automatic publicPath is not supported in this browser
Получилось победить так:
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: path.resolve(__dirname, 'dist')
},
}
,'css-loader'
]
спасибо большое!
Кстати у меня в таком случае не грузилас картинка. publicPath: '/dist Изменил на такое,и все работает
'
@@dmitriysannikov6122 хм, у меня тоже была ошибка с подгрузкой изображений , но я думал на file-loader, а в итоге просто костылём всё решил. Писал background-image не в css файле, а в переменной в react и там в файле добавлял уже эту переменную к style блока . Надо будет проверить ваш вариант, спасибо.
если не грузятся шрифты и картинки, то вот так:
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + '/';
},
},
},
'css-loader',
],
},
@@user-xd6ev4gz2k Спасибо)
Спасибо огромное за видео! Повторяла все, о чем ты рассказывал, не осталось ни одного вопроса, все максимально понятно!) То, что ты делаешь - нереальный труд и огромная инвестиция в будущих программистов)) Не представляю сколько времени тебе заняло научиться так четко и легко объяснять сложные вещи...Спасибо большое!))
Спасибо большое. Одно из самых дельных видео по Webpack. Правда на 2022 год видео немного устарело, некоторые конфигурации для некоторых плагинов пришлось переписать (это всё очень быстро нагуглилось и проблем не составило) и всё запускается и работает.
Наконец полностью просмотрел данное видео. Это же колоссальная, великолепная работа. Если до видео смотришь на конфиг вэбпака: ээ пойду ка я отсюда, что то пугающе монструозное, вдруг что то сломаю. После видео: о так надо поправить это и это и я получу нужный результат. Еще раз спасибо.
Пожалуйста сделай курс по Webpack 5
а в видео разбирался лоадер для pug?
просто лень искать
@@timofeysyr5163 нет
Владилен, сделай пожалуйста курс на Webpack 5, много чего уже поменялось
Лайк, чтобы в топ
а какой смысл? чуть меняется синтаксис , а в целом в данном видео понятна вся суть и механика пакета
Владилен, наткнулся на твой канал на днях, как раз надо было настраивать вебпак, скажу вот что: ты единственный, кто смог изложить материал так, что понятно абсолютно все, благодаря тебе я смог настроить все правильно. У тебя актуальная информация по вебпаку. Единственное, чего не хватило - это как расположить файлы в папке dist по категориям, структурировать, но думаю в документации я найду ответ. Спасибо тебе, я никогда не пишу комментарии, но это отдельный случай!
Не знаю есть ли еще те, у кого не работает "wabpack" в консоли, но нашел способ обойти:
- в "package.json" в поле "script" заменяем команду "test" на "built" и в значении пишем "webpack --config webpack.config.js"
- теперь в консоли у нас доступна команда "npm run built" после чего создается папка "dist" с тем самым "bundle.js"
*но в "bundle.js" нем не будет тех "100 строк которые мы не писали" что появляются у Владилена, но import&export работать будут, не знаю с чем это связано
*хотя тут могут уже такие вещи как разница версий влиять
npx webpack
Спасибо, из всех кого я когда-либо смотрел, твои видео самые понятные и их приятно смотреть
Когда шёл на CZcams за обучалками по Webpack - прямо таки молился, чтоб у Владилена Минина был такой контент ) пушка! Спасибо!
Меня очень веселит то, как ты шрифт называешь 'работо' 😄
59:50 *Подгрузить JSON и JavaScript*
Вероятно следует уточнить этот вопрос, потому как для многих он не до конца прозрачен.
В самом JS нет ни возможности прочитать файл, ни тем более получить что-то удаленно.
Этот функционал импортируется разными сторонними API, в зависимости от условий в которых работает JS.
В случае node это FSReqCallback который является оберткой вокруг uv_fs_* функций из C++
В случае браузерной среды, можно использовать xhr api с пришедшим ему на смену fetch api.
А для чтения локальных файлов, вполне уже можно использовать Filesystem Api.
В случае какого нибудь китайского чайника с js на борту может вообще не быть никаких аналогов.
Важно всегда проводить эту границу, чтобы вдруг потом не удивляться почему это в Node нет Fetch
Сейчас file-loader для картинок и шрифтов не нужен, просто прописываете в конфиге test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', и test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', соответственно
Какая версия ноды в проекте? Ловлю кучу ошибок при запуске исходника
2022 год . У кого не пашет картинка вот решение :
Пишем в webpackconfig:
output: {
...
assetModuleFilename: 'assets/images/[hash][ext]',
},
module: {
rules: [
{
...
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
]
}
Вся суть в том , что в правиле где "use: [file-loader]" нужно просто его убрать и заменить на "type: 'asset/resource'"
спасибо тебе, добрый человек! Пусть твои коды никогда не знают багов :))))
Отличное видео, стало понятно как работает webpack и другие сборщики, Спасибо!
"можно помедленнее, я записываю" ©️
спасибо! много чего стало понятно, буду пробовать применять на практике 🎓. жму руку и палец вверх. 🖖
Уфффф) Просто лайк не глядя! UPD: было бы круто разобрать и Eslint
Для тех, кто хочет освоить профессию Frontend разработчика за 7 месяцев -
bit.ly/3yqZNNV
Освоить основы веб-разработки бесплатно. Курс по HTML & CSS - bit.ly/3yqoeuR
Спасибо, за Работу, Владилен. Решил изучать реакт нэтив встретил этот канал. Купил курс и сэкономил очень много времени в изучении хотя никак не выберу время дойти екго до конца. На мой взгляд здесь самый качественный контэнт по фронтенду в рунете. Еще раз Спасибо!
Владилен круто будет увидеть ролик по eslint настроеный и видео по тестам на jest
Владилен, огромнейшее спасибо! Это космос.) Каналу в топ осталось пожелать, а плюсов в карму ты и так дофига заработал; ))
Люди, у которых в 2:41:35 возникает вот такая ошибка:
TypeError: Cannot read properties of undefined (reading 'getFormatter') - нужно установить npm пакет вот такой версии "eslint": "^7.13.0" и запустить заново
Я человек простой, вижу твои видосы - сначала лайкаю, а потом смотрю xd
Классный алгоритм)
Аналогично.
Я вообще как зашел на канал завис по полной. Не могу оторваться.
CZcams плохо относится в видео, которые лайкают до просмотра. Поэтому посмотри хотя бы до половины перед лайком
@@VladilenMinin ну вообще, говорят что ютьюб не засчитывает лайк, если сначала его ставишь, а потом смотришь видос. Так что в алгоритме баг завёлся)
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.
с JQuery будет работать, если вызвать функцию после render React. Но текст должен потеряться при перерисовке.
Переслушивал учебный материал по нескольку раз, и каждый раз находил пропущенные мимо ушей полезности. Каждый комментарий по делу! Выражаю огромное уважение Владилену. Спасибо!
В этом видео и я правда очень много сконцентрировал)
1:47:08 У кого выдаёт "Automatic publicPath is not supported in this browser", пропишите в options:
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + '/';
}
Спасибо за помощь
хахахахах, такая же ошибка была, гуглил час, разобрался, хотел написать как решить эту проблему, и вдруг ты тут с таким же решением, ты где был час назад?)
Спасибо! ))
Эх, в 2022 году сборка не рабочая уже((( Выдает тонну ошибок при установке.
npm ci не помогает?
Автору респект. Хорошее видео для новичка. Показаны все этапы сборки приложения. Не открыл для себя ничего нового, но жалею, что не было подобного видео когда начинал изучать webpack.
Благодарю. Все доступно и понятно, без лишней воды. Просмотрел на одном дыхании. Краткий конспект на 3 страницы вышел.
То, что нужно и чего всегда не хватает. Спасибо!
Владилен, твои туториалы - просто огонь, спасибо тебе большое за твою работу, ты прям нереально помогаешь к собесам готовиться!
Владилен, спасибище! Я на ваших видео прям прокачася по многим темам! Патерны, вебпак, промисы, фетч. все огонь!
Чел ты лучший, я неделю назад много не понимал в js. На протяжение этой недели я смотрел твои видосы и с каждым днем js становился все понятнее и понятнее, щас досмотрю этот видос и начну vue. Тупа лучший, щас специально всем видосам лайки поставлю, даже те которые не смотрел
Рад слышать)
жжошь Влад, 3 часа информативного контента!
Сам удивился, что так много подготовил)
Владилен Минин я не успеваю твои старые ролики пересмотреть, пока штудирую старое - выходит новое. Вот это уровень
@@johnd1431 И мы только начинаем)
То что нужно) будет что то о Docker-е ??
Докер - это же бекенд. А так - было бы очень интересно тоже посмотреть.
@@dizelvinable И что, что бэкенд?) Автор так же учит ноде
@@Levelord92 ааа, тогда супер) Надеюсь, скоро будет) А то разные видео про докер смотрел, но всё равно остаётся много вопросов.
@@dizelvinable ну не совсем для бэк. можно использовать и для развертывания разных окружений разработки фронт. ну и локально несколько бэков иметь, для разработки под них фронт - тож актуально
@@dmitryfokin5205 Ясно, спасибо)
Очень подробно и хорошо всё разжевано и в рот положено)) то что доктор прописал, уже не первый раз пытался разобраться с вебпаком, но до этого все было безуспешно, спасибо от души!!!
Давно хотел разобраться с кучей ключей-конфигов для Webpack и очень рад, что нашел это видео! Спасибо большое, Владилен!
Лайк срочно! )) Спасибо, Владилен!
На последних версиях webpack-cli и webpack-dev-server не работает скрипт "webpack-dev-server --mode development --open". Запускайте через скрипт "webpack serve".
как же он хорош...
чел, ты настоящий учитель!
материал очень хорошо разжеван, осталось только переварить
Красавчик ! Спасибо! Я теперь твой постоянный зритель ) . Очень хорошо излагаешь - респект! Не пропускаю ни одного видоса ))). Webpack очень кстати - в наглядной форме закрыл некоторые пробелы в знаниях. Хотелось конечно еще бы увидеть тут про интеграцию с browsersync и адаптацию webpack для работы в связке с php ( в том числе и hmr), например при разработке wordpress-темы. Но это мои нескромные хотелки. А ваще, все твои курсы - это бомба!
01:52:06 Если проблема
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {},
},
И как быть?
Для 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)))
Большое тебе человеческое спасибо, мужик!!
Очень полезно и информативно.
Нет воды, приятно слушать, подача материала четкая и внятная.
Это большая и качественная работа.
Отблагодарил на ЯД, еще раз спасибо!
Владилен, спасибо за видео. Все понятно, без лишней воды. Это мое первое видео на твоем канале, теперь знаю чем заняться на выходных. Жду с нетерпением видео по ESlint. А то толковых гайдов по ниму днем с огнем. Ты реально круто доносишь информацию. Еще раз спасибо.
Владилен, (пользуясь случаем) огромное спасибо за курс!!
Остался один непонятный момент:
на этапе (45:55), когда мы настроили webpack, чтобы он автоматом подключал js-файлы в шаблоне html,
у нас фактически поломался наш первоначальный шаблон...
Т.к. в первоначальном шаблоне у нас analytics.[contenthash].js подключался в хедере, а не в конце body...
Предположим нам это критически важно. Как сделать так, чтобы analytics.[contenthash].js (т.е. именно с хешем в названии) отдельно подключался в хедере?
разобрался?