Тёмный

НАСТРОЙ СВОЙ REACT ПРОЕКТ С ПОМОЩЬЮ WEBPACK | How to config webpack? 

Rutina dev
Подписаться 492
Просмотров 18 тыс.
50% 1

Вебпак - это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один бандл (bundle), на который может ссылаться файл «index.html».
Ссылка на репозиторий: github.com/raj...
Сниппет: `npm install -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader html-webpack-plugin mini-css-extract-plugin sass sass-loader style-loader`

Опубликовано:

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 63   
@АннаПотреба-я2щ
@АннаПотреба-я2щ 8 месяцев назад
Потрясающе, впервые у меня сработало все без ошибок, а объяснение понятное и без воды. Спасибо, дружище!
@krendel42
@krendel42 Год назад
Ты создан для того чтобы вести ютуб канал - приятный голос, коротко и по делу, офигенный монтаж! Кароче, не останавливайся, это точно твоë!
@dmitriij5685
@dmitriij5685 2 года назад
Отличный урок! Коротко и по делу. Спасибо🤝
@TeenDay
@TeenDay 2 года назад
По поводу хэша, это чуть чуть не так работает. На самом деле, если браузер будет загружать файл с одинаковым названием (даже если он изменился), кэш как раз таки и создаст проблемы, ведь у пользователя сохранена старая версия скрипта или css. Именно поэтому хэш и добавляют, т.к. для браузера каждый такой файл считается как новый, и он загружает его заново
@rutinadev
@rutinadev 2 года назад
Спасибо за информативный комментарий. Вы правы, это ещё одна причина использовать хэш🙂
@grenadier4702
@grenadier4702 2 года назад
У output есть настройка clean. Это заместо CleanWebpackPlugin, если используете его чисто для очищения всего
@rutinadev
@rutinadev 2 года назад
Спасибо что заметили, учимся вместе 🙂
@hereandthere1975
@hereandthere1975 2 года назад
Быстро и полезно.
@rutinadev
@rutinadev 2 года назад
Спасибо за отзыв :)
@ДенисЕрохин-о6ы
@ДенисЕрохин-о6ы 2 года назад
Чувак, ты просто лучший!
@rutinadev
@rutinadev 2 года назад
Спасибо большое 🙂
@jonyonee
@jonyonee 2 года назад
Спасибо тебе большое, а можешь сделать видео как ты настраиваешь вепбак для лендинга ? И можно ли с помощью плагина HtmlWebpackPlugin HTML код разбивать на файлы ?
@anastasia__kot
@anastasia__kot Год назад
спасибо отличный урок!
@rutinadev
@rutinadev Год назад
Спасибо за приятный коментарий!
@tatianaagapkina8658
@tatianaagapkina8658 Год назад
Классный видос! Выпусти еще что-нибудь, хорошо объясняешь :) только немного отвлекал фон с летящими звездами
@pashadotcenko7391
@pashadotcenko7391 2 года назад
скачиваю твой репозитарий, выскакивает такая ошибка -->>>> 'NODE_ENV' is not recognized as an internal or external command, operable program or batch file.
@pashadotcenko7391
@pashadotcenko7391 2 года назад
1) npm i cross-env
@pashadotcenko7391
@pashadotcenko7391 2 года назад
2) заменить "dev": NODE_ENV=development webpack serve --config webpack.config.js", на "dev": "cross-env NODE_ENV=development webpack serve --config webpack.config.js",
@pahaivanov1611
@pahaivanov1611 Год назад
досмотрел досюдова и поставил лайк)
@Serega5j
@Serega5j 2 года назад
ошибка запуска -"NODE_ENV не является внутренней или внешней командой" Что то ты нам не верно рассказал *Обновление: ошибка была связана с тем что я разработку веду на винде а автор не на винде. И потому такая разница. У него это рабочий код а на винде в script нужно добавлять префикс set или использовать пакет cross-env добавленный в dev зависимость package.json
@shmeqez
@shmeqez Год назад
Спасибо : )
@fewart
@fewart 5 месяцев назад
спасибо за сниппет
@romanmed9035
@romanmed9035 2 года назад
установил как показано. сделал как написано, но не помогло. export 'default' (imported as 'store') was not found in './store.jsx' (module has no exports). экспорт вот так делается module.exports =. когда переделал на экспорт дефаулт без слова модул, то все запустилось. но тут таких мест сотни. ранее работало на старом вебпаке и вот обновил. если не получится решить проблему, придется возвращать старый вебпак.
@rutinadev
@rutinadev 2 года назад
Здравствуйте. Можете добавить `"type" : "commonjs" ` в `package.json` и попробовать опять 🤔
@romanmed9035
@romanmed9035 2 года назад
@@rutinadev спасибо, попробую. сначала почитаю куда и как это писать. но там имеются и настоящие модули с правильным экспортом
@AlexDive
@AlexDive 2 года назад
А где же ссылка на репозиторий?
@rutinadev
@rutinadev 2 года назад
Извиняюсь, товарищ, забыл добавить в описание 😅 Можете глянуть в описание. Был бы рад лайку, если ещё не поставил 🙂
@Serega5j
@Serega5j 2 года назад
А как настроить вебпак с "react-app-rewired"? там в скриптах используется react-app-rewired *Обновление: вопрос пока еще актуален
@VVSTru
@VVSTru 2 года назад
спасибо, помог найти ошибку в конфиге
@rutinadev
@rutinadev 2 года назад
Рад, что было полезно 🙂
@oleksiishkulipa1626
@oleksiishkulipa1626 Год назад
спасбио большое за ролик, а можешь пожалуйста более подробный видос сделать по вебпаку для реакта ? по всем плагинам которые действительно понадобятся в продакшен ? и где их смотреть ? спасибо
@rutinadev
@rutinadev Год назад
Спасибо за комментарий! В принципе в данном видео все плагины для продакшна показаны. Можно конечно добавить еще, но это зависит от проекта и меняется. Я бы посоветовал прочитать несколько статей в интернете на счет плагинов :)
@oleksiishkulipa1626
@oleksiishkulipa1626 Год назад
@@rutinadev хорошо получилось, спасибо) а можно по вайт и турбопаку который в некст джс используется? спасибо
@rutinadev
@rutinadev Год назад
@@oleksiishkulipa1626 по вит если сделать такой ролик, он будет слижком коротким так как с коробки он основные вещи как css и js/ts преобразования он уже делает. По турбопаку так же. Но можно сделать информативное видео про Турбопак, как он работает и так далее, может быть выйдет интересное видео, спасибо за комментарий :)
@oleksiishkulipa1626
@oleksiishkulipa1626 Год назад
@@rutinadev спасибо) но было бы хорошо все таки показать тем не менее, если короткие то можно было бы их тогда объеденить(вайт + турбопак)
@demiurgen13
@demiurgen13 2 года назад
ДевСервер, который будет сервить наши ассеты в дев энвайронменте - это 5! 😆
@rutinadev
@rutinadev 2 года назад
😅😅
@alexlei4232
@alexlei4232 2 года назад
Не понимаю как запускать "npm run dev" не работает ("NODE_ENV" не является внутренней или внешней командой, исполняемой программой или пакетным файлом.) ааааааааааааааааааааааааааааааааааааа
@rutinadev
@rutinadev 2 года назад
Попробуй написать set перед NODE_ENV скорее всего ошибка из-за того, что вы используете Windows
@KhikmatjonAzizov
@KhikmatjonAzizov 2 года назад
круто
@Doodler00
@Doodler00 Год назад
в общем у кого в конце выскакивает ошибка, хотя всё сделали правильно - листайте до комментария Паши Доценко
@rutinadev
@rutinadev Год назад
Спасибо за коментарий! Или же можете приписать "set" к началу скрипта "NODE_ENV" если у вас винда стоит :)
@mivalb7979
@mivalb7979 2 года назад
А как настроить, чтобы при запуске в режиме разработки в браузере открывалась вкладка с localhost ?
@rutinadev
@rutinadev 2 года назад
Ip 0.0.0.0 и является localhost, так что нет проблем по этому поводу)
@syakoo44
@syakoo44 Год назад
"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --open", } в скрипте в конце добавляешь --open
@itdotconf675
@itdotconf675 Год назад
фигня. Поставь голос себе хотя бы
@rutinadev
@rutinadev Год назад
А что с голосом не так?)
@itdotconf675
@itdotconf675 Год назад
@@rutinadev уставший наверное был. Или ещё что. Нет интонации и так далее...
@Syberby
@Syberby 2 года назад
В чем разница между настройкой проекта таким образом и react create-app?
@rutinadev
@rutinadev 2 года назад
React-create app под копотом делает примерно похожее и тоже использует вебпак, просто каждая компания кастомизирует бандл под себя а в React-create-app это сложно и лучше с нуля самому всё делать.
@yakub8798
@yakub8798 2 года назад
дружище лайк и подписку заслужил , продолжай радовать подписчиков годным контентом !!! Удачи в карьере ютубера и программиста .
@ИванДмитров-б5я
@ИванДмитров-б5я 2 года назад
молодец, очень полезно
@strelok6903
@strelok6903 2 года назад
)
@olesya7748
@olesya7748 Год назад
Подскажите, пожалуйста, как мне записать имена классов без использования styles.class . Если записывать как обычно, ошибки нет, но свойства не применяются
@dmitriystoyanov933
@dmitriystoyanov933 2 года назад
Лучший урок по вебпаку и короткий. Спасибо!
@rutinadev
@rutinadev 2 года назад
Спасибо за комментарий🙂
@mortinsz2417
@mortinsz2417 Год назад
Не работает hot reload. Постоянно надо перезагружать проект
@KhokhlovNikita
@KhokhlovNikita 2 года назад
То есть, для того, чтобы css работал, нужно всегда прописывать в коде реакта к тегам html .styles (тэг.styles)?
@vr4836
@vr4836 Год назад
Спасибо!!
@rutinadev
@rutinadev Год назад
Спасибо за комментарий, друг!
@stanislavberger3541
@stanislavberger3541 2 года назад
у меня к сожалению ругается на строчку в index.js: ReactDOM.render(, document.getElementById("root")); - почему то Module build failed (from ./node_modules/babel-loader/lib/index.js) Подскажите как поправить?)
@rutinadev
@rutinadev 2 года назад
Здравствуйте! Если вы повторили точностью как в видео то у вас должно все заработать. К сожалению мне не понятно от коментария что именно не так. Вы может что-то упустили. Может сравнение вашего проекта с проектом указанным в описании вам поможет :)
@miss_ia5744
@miss_ia5744 Год назад
проверьте правильно ли написали файл ".babelrc" - только так и не иначе (должен преобразоваться в файл типа B перед названием) и поставьте @babel/plugin-syntax-jsx
Далее
11 ming dollarlik uzum
00:43
Просмотров 319 тыс.
Witch changes monster hair color 👻🤣 #shorts
00:51
Barno
00:22
Просмотров 569 тыс.
Create a React App WITHOUT Create React App
26:21
Просмотров 54 тыс.
Ядерка-как это будет.
25:55
Просмотров 187 тыс.
Hack your brain with Obsidian.md
11:53
Просмотров 1,9 млн
React Webpack Setup From Scratch
20:53
Просмотров 59 тыс.
11 ming dollarlik uzum
00:43
Просмотров 319 тыс.