Сборка проекта с three.js с помощью webpack: настройка дева и прода

В этом видео мы погрузимся в процесс работы с библиотекой three.js в уже собранном проекте при помощи инструмента webpack. Мы изучим, как настроить окружение разработки, чтобы быстро просматривать и тестировать наши трехмерные проекты. Вы узнаете, как настроить dev-server и использовать горячую перезагрузку (hot reload) для мгновенного обновления изменений в вашем проекте. Кроме того, мы также рассмотрим процесс сборки и оптимизации вашего приложения для продакшена с помощью webpack, чтобы получить максимальную производительность и эффективное использование ресурсов.

••••••••••••••
0:00 Зачем нам другая сборка?
1:17 Создаем структуру папок
2:06 Инициализация проекта и установка пакетов
2:40 Создание конфигураций webpack
5:55 Настройка скриптов и запуск

••••••••••••••
Ресурсы, про которые я говорила в ролике:

⚪️ NodeJS: [https://nodejs.org](https://nodejs.org/en)

⚪️ Webpack: [https://webpack.js.org](https://webpack.js.org/)

👾 Исходный код: https://github.com/GuVictory/threejs-...

Пакеты, которые я устанавливала в видео:

npm install webpack webpack-cli webpack-dev-server webpack-merge clean-webpack-plugin copy-webpack-plugin @babel/core @babel/preset-env babel-loader css-loader file-loader html-loader html-webpack-plugin mini-css-extract-plugin portfinder-sync raw-loader style-loader ip --save-dev

••••••••••••••

✈️ Telegram канал проекта: https://t.me/WebDevSandbox

☕️ Угостить меня кофе: https://boosty.to/guvictory/donate

🦄 Boosty подписка на доступ к текстовым материалам: https://liba.ro/5z6e97xge
🔥 Boosty подписка на доступ к текстовым материалам и коммьюнити: https://liba.ro/5z6e9l5h4

Спасибо за внимание ♥︎