НАСТРОЙ СВОЙ REACT ПРОЕКТ С ПОМОЩЬЮ WEBPACK | How to config webpack?
HTML-код
- Опубликовано: 13 янв 2022
- Вебпак - это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один бандл (bundle), на который может ссылаться файл «index.html».
Ссылка на репозиторий: github.com/rajabdearly/react-...
Сниппет: `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`
Отличный урок! Коротко и по делу. Спасибо🤝
Потрясающе, впервые у меня сработало все без ошибок, а объяснение понятное и без воды. Спасибо, дружище!
Ты создан для того чтобы вести ютуб канал - приятный голос, коротко и по делу, офигенный монтаж! Кароче, не останавливайся, это точно твоë!
дружище лайк и подписку заслужил , продолжай радовать подписчиков годным контентом !!! Удачи в карьере ютубера и программиста .
Лучший урок по вебпаку и короткий. Спасибо!
Спасибо за комментарий🙂
Быстро и полезно.
Спасибо за отзыв :)
Чувак, ты просто лучший!
Спасибо большое 🙂
Классный видос! Выпусти еще что-нибудь, хорошо объясняешь :) только немного отвлекал фон с летящими звездами
досмотрел досюдова и поставил лайк)
спасибо отличный урок!
Спасибо за приятный коментарий!
молодец, очень полезно
спасибо за сниппет
if ur OS is Windows - do not forget to add .env file to ur project n 'npm install cross-env' (import it to your server file) --> thats important. but if you have Linux or MacOS - thats fine, just add another loaders for your files CSS - and done it! So I gave u a LIKE, cause this video is really helpfull, thank u so much brother, wit love from London!!!
Thanks a lot for feedback and helping others in comment❤️
Спасибо тебе большое, а можешь сделать видео как ты настраиваешь вепбак для лендинга ? И можно ли с помощью плагина HtmlWebpackPlugin HTML код разбивать на файлы ?
То есть, для того, чтобы css работал, нужно всегда прописывать в коде реакта к тегам html .styles (тэг.styles)?
круто
У output есть настройка clean. Это заместо CleanWebpackPlugin, если используете его чисто для очищения всего
Спасибо что заметили, учимся вместе 🙂
Спасибо!!
Спасибо за комментарий, друг!
По поводу хэша, это чуть чуть не так работает. На самом деле, если браузер будет загружать файл с одинаковым названием (даже если он изменился), кэш как раз таки и создаст проблемы, ведь у пользователя сохранена старая версия скрипта или css. Именно поэтому хэш и добавляют, т.к. для браузера каждый такой файл считается как новый, и он загружает его заново
Спасибо за информативный комментарий. Вы правы, это ещё одна причина использовать хэш🙂
Подскажите, пожалуйста, как мне записать имена классов без использования styles.class . Если записывать как обычно, ошибки нет, но свойства не применяются
А как настроить вебпак с "react-app-rewired"? там в скриптах используется react-app-rewired
*Обновление: вопрос пока еще актуален
скачиваю твой репозитарий, выскакивает такая ошибка -->>>> 'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
1) npm i cross-env
2) заменить "dev": NODE_ENV=development webpack serve --config webpack.config.js", на "dev": "cross-env NODE_ENV=development webpack serve --config webpack.config.js",
В чем разница между настройкой проекта таким образом и react create-app?
React-create app под копотом делает примерно похожее и тоже использует вебпак, просто каждая компания кастомизирует бандл под себя а в React-create-app это сложно и лучше с нуля самому всё делать.
установил как показано. сделал как написано, но не помогло. export 'default' (imported as 'store') was not found in './store.jsx' (module has no exports). экспорт вот так делается module.exports =. когда переделал на экспорт дефаулт без слова модул, то все запустилось. но тут таких мест сотни. ранее работало на старом вебпаке и вот обновил. если не получится решить проблему, придется возвращать старый вебпак.
Здравствуйте. Можете добавить `"type" : "commonjs" ` в `package.json` и попробовать опять 🤔
@@rutinadev спасибо, попробую. сначала почитаю куда и как это писать. но там имеются и настоящие модули с правильным экспортом
)
Не работает hot reload. Постоянно надо перезагружать проект
спасибо, помог найти ошибку в конфиге
Рад, что было полезно 🙂
ошибка запуска -"NODE_ENV не является внутренней или внешней командой" Что то ты нам не верно рассказал
*Обновление: ошибка была связана с тем что я разработку веду на винде а автор не на винде. И потому такая разница. У него это рабочий код а на винде в script нужно добавлять префикс set или использовать пакет cross-env добавленный в dev зависимость package.json
Спасибо : )
спасбио большое за ролик, а можешь пожалуйста более подробный видос сделать по вебпаку для реакта ? по всем плагинам которые действительно понадобятся в продакшен ? и где их смотреть ? спасибо
Спасибо за комментарий! В принципе в данном видео все плагины для продакшна показаны. Можно конечно добавить еще, но это зависит от проекта и меняется. Я бы посоветовал прочитать несколько статей в интернете на счет плагинов :)
@@rutinadev хорошо получилось, спасибо) а можно по вайт и турбопаку который в некст джс используется? спасибо
@@oleksiishkulipa1626 по вит если сделать такой ролик, он будет слижком коротким так как с коробки он основные вещи как css и js/ts преобразования он уже делает. По турбопаку так же. Но можно сделать информативное видео про Турбопак, как он работает и так далее, может быть выйдет интересное видео, спасибо за комментарий :)
@@rutinadev спасибо) но было бы хорошо все таки показать тем не менее, если короткие то можно было бы их тогда объеденить(вайт + турбопак)
А где же ссылка на репозиторий?
Извиняюсь, товарищ, забыл добавить в описание 😅 Можете глянуть в описание. Был бы рад лайку, если ещё не поставил 🙂
А как настроить, чтобы при запуске в режиме разработки в браузере открывалась вкладка с localhost ?
Ip 0.0.0.0 и является localhost, так что нет проблем по этому поводу)
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --open",
} в скрипте в конце добавляешь --open
ДевСервер, который будет сервить наши ассеты в дев энвайронменте - это 5! 😆
😅😅
Не понимаю как запускать "npm run dev" не работает ("NODE_ENV" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.) ааааааааааааааааааааааааааааааааааааа
Попробуй написать set перед NODE_ENV скорее всего ошибка из-за того, что вы используете Windows
в общем у кого в конце выскакивает ошибка, хотя всё сделали правильно - листайте до комментария Паши Доценко
Спасибо за коментарий! Или же можете приписать "set" к началу скрипта "NODE_ENV" если у вас винда стоит :)
фигня. Поставь голос себе хотя бы
А что с голосом не так?)
@@rutinadev уставший наверное был. Или ещё что. Нет интонации и так далее...
у меня к сожалению ругается на строчку в index.js: ReactDOM.render(, document.getElementById("root")); - почему то Module build failed (from ./node_modules/babel-loader/lib/index.js)
Подскажите как поправить?)
Здравствуйте! Если вы повторили точностью как в видео то у вас должно все заработать. К сожалению мне не понятно от коментария что именно не так. Вы может что-то упустили. Может сравнение вашего проекта с проектом указанным в описании вам поможет :)
проверьте правильно ли написали файл ".babelrc" - только так и не иначе (должен преобразоваться в файл типа B перед названием) и поставьте @babel/plugin-syntax-jsx