Webpack. Базовая сборка проекта

Привет! В этом видео я разберу сборку проекта на Webpack. Рассмотрим, как собрать все js в один, сжать файлы, собрать css, минифицировать изображения, и многое другое. Поехали! Содержание: 00:00 - Вступление 01:40 - Обзор исходных файлов 04:20 - Кратко про Node.js 06:00 - Создаем package.json 07:00 - Устанавливаем webpack 09:20 - Создаем webpack.config.js 09:25 - Базовый конфиг 13:00 - Разбиваем сборку на дев и прод 21:00 - Обработка html 26:15 - Очистка итоговой папки 28:05 - Обработка css и scss 37:30 - Устанавливаем dev-server 46:20 - Обрабатываем ассеты 48:25 - Обработка картинок 55:40 - Обработка шрифтов 57:00 - Обработка js 01:01:25 - Sourcemaps 01:03:42 - Оптимизация ассетов 01:07:43 - Оптимизация картинок 01:12:45 - Как подключать плагины 01:17:20 - Заключение https://webpack.js.org/ - сайт webpack https://github.com/maxdenaro/maxgraph... - исходники к видео на GitHub    • Stylelint. Как установить и пользоваться   - видео про Stylelint Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? https://clck.ru/Gr9Ec Моя страница вконтакте: http://vk.com/maxdenaro Мой блог: http://blog.maxgraph.ru Мой сайт: http://maxgraph.ru Канал в телеграм: https://teleg.run/maxgraph Чат для верстальщиков: https://teleg.run/maxgraph_chat #ityoutubersru #webpack #сборка

Webpack ПОЛНЫЙ КУРС от А до Я. Вся конфигурация, Микрофронтенд, Монорепозиторий, Module Federation
▶︎

Webpack ПОЛНЫЙ КУРС от А до Я. Вся конфигурация, Микрофронтенд, Монорепозиторий, Module Federation

Gulp 4. Полное руководство и настройка своей собственной сборки для верстки в 2020
▶︎

Gulp 4. Полное руководство и настройка своей собственной сборки для верстки в 2020

⚡️ Vite - Быстрая Сборка JavaScript Проектов | Полный курс
▶︎

⚡️ Vite - Быстрая Сборка JavaScript Проектов | Полный курс

Верстаю сайт, используя фишки своей Gulp-сборки
▶︎

Верстаю сайт, используя фишки своей Gulp-сборки

Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, авто-префиксы
▶︎

Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, авто-префиксы

Верстка сайта для новичков HTML + CSS + JS (Макет Wishbone)
▶︎

Верстка сайта для новичков HTML + CSS + JS (Макет Wishbone)

Полный Курс CSS / Изучение в одном видео для начинающих с нуля
▶︎

Полный Курс CSS / Изучение в одном видео для начинающих с нуля

Uninterrupted Deep Work Mix ~ Immersive Productivity Soundscape ~ Neural Focus Study Music
▶︎

Uninterrupted Deep Work Mix ~ Immersive Productivity Soundscape ~ Neural Focus Study Music

How to Start Coding | Programming for Beginners | Learn Coding | Intellipaat
▶︎

How to Start Coding | Programming for Beginners | Learn Coding | Intellipaat

Gulp и webpack - как и зачем подружить системы сборки проекта
▶︎

Gulp и webpack - как и зачем подружить системы сборки проекта

Docker для Начинающих – Полный Курс
▶︎

Docker для Начинающих – Полный Курс

Focus Music —Zero Distractions Deep Work | Executive Hyperfocus for Coding, Study & High Performance
▶︎

Focus Music —Zero Distractions Deep Work | Executive Hyperfocus for Coding, Study & High Performance

Стас Курилов — Глубокое погружение в webpack
▶︎

Стас Курилов — Глубокое погружение в webpack

Build a Complete Medical Chatbot with LLMs, LangChain, Pinecone, Flask & AWS 🔥
▶︎

Build a Complete Medical Chatbot with LLMs, LangChain, Pinecone, Flask & AWS 🔥

Full HTTP Networking Course – Fetch and REST APIs in JavaScript
▶︎

Full HTTP Networking Course – Fetch and REST APIs in JavaScript

Work Music for Deep Focus and Hyper Efficient
▶︎

Work Music for Deep Focus and Hyper Efficient

Рекомендации по верстке сайта. Чеклист верстки
▶︎

Рекомендации по верстке сайта. Чеклист верстки

CLAUDE CODE FULL COURSE 4 HOURS: Build & Sell (2026)
▶︎

CLAUDE CODE FULL COURSE 4 HOURS: Build & Sell (2026)

GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проекта
▶︎

GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проекта

Лучший слайдер для сайта на чистом JS! Подробный обзор плагина Swiper js
▶︎

Лучший слайдер для сайта на чистом JS! Подробный обзор плагина Swiper js