πŸ’» Π­ΠΊΡΠΊΠ»ΡŽΠ·ΠΈΠ²Π½Ρ‹ΠΉ слив "Онлайн-курс Β«WebpackΒ» (2023)" ΠΎΡ‚ HTML Academy: [HTML Academy]! Π‘ΠΊΠ°Ρ‡Π°ΠΉ бСсплатно πŸš€ | KURSAR | KURSAR
PRO-доступ
home Главная chevron_right folder АдминистрированиС ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ chevron_right folder Π₯Π°ΠΊΠΈΠ½Π³ chevron_right
folder_open [HTML Academy] Онлайн-курс Β«WebpackΒ» (2023)
[HTML Academy] Онлайн-курс Β«WebpackΒ» (2023)

[HTML Academy] Онлайн-курс Β«WebpackΒ» (2023)

[HTML Academy] Онлайн-курс Β«WebpackΒ» (2023)

Для Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Webpack β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· инструмСнтов, ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‰ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ.‍
Webpack ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ прилоТСния, ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ, сборку ΠΈ тСстированиС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° курса:
Π Π°Π·Π΄Π΅Π» 1. Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅
Π£Π·Π½Π°Π΅ΠΌ, Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ webpack ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π² любом ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.
‍— Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ webpack
β€” Π‘Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с webpack β€” Ρ„Π°ΠΉΠ» package.json
β€” Π”Π΅ΠΌΠΎ: созданиС простого Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ„ΠΈΠ³Π°
β€ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°
β€” Π—Π°Π΄Π°Π½ΠΈΠ΅: сборка тСстового ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
β€” РСшСниС: пошаговая эталонная рСализация
‍— ВСст ΠΏΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Ρƒ

Π Π°Π·Π΄Π΅Π» 2. ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹
Рассмотрим Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² webpack.‍
β€” Π€ΠΎΡ€ΠΌΠ°Ρ‚ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² webpack
β€” ΠœΡƒΠ»ΡŒΡ‚ΠΈΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Π΅ прилоТСния, основныС ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ webpack
β€” Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΠΎΠ½Ρ„ΠΈΠ³Π°ΠΌΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов
β€” Π”Π΅ΠΌΠΎ: Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ESLint ΠΈ Prettier Π² Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚
ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°
β€” Π—Π°Π΄Π°Π½ΠΈΠ΅: настройка Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… зависимостСй
β€” РСшСниС: пошаговая эталонная рСализация
β€” ВСст ΠΏΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Ρƒ

Π Π°Π·Π΄Π΅Π» 3. Входная Ρ‚ΠΎΡ‡ΠΊΠ° прилоТСния
Начнём Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ основныС ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с webpack.
β€” Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ входная Ρ‚ΠΎΡ‡ΠΊΠ° прилоТСния
β€” Π”Π΅ΠΌΠΎ: пСрСнос ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π½Π° webpack
β€” Π”Π΅ΠΌΠΎ: ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°
β€” Π—Π°Π΄Π°Π½ΠΈΠ΅: настройка ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½ΠΎΠ³ΠΎ прилоТСния
β€” РСшСниС: пошаговая эталонная рСализация
β€” ВСст ΠΏΠΎ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Ρƒ

Π Π°Π·Π΄Π΅Π» 4. Выходная Ρ‚ΠΎΡ‡ΠΊΠ° ΠΈ сборка прилоТСния
Рассмотрим ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ webpack β€” output.
β€” Π’Ρ‹Ρ…ΠΎΠ΄ ΠΈΠ· прилоТСния ΠΏΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Output
β€” НововвСдСния webpack v5
β€” ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈ кодсплиттинг β€” Π²Π΅Π½Π΄ΠΎΡ€Ρ‹
β€” ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ
β€” Π”Π΅ΠΌΠΎ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π±ΠΎΡ‚Ρ‹ asset
β€ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°
β€” Π—Π°Π΄Π°Π½ΠΈΠ΅: оптимизация ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
β€” РСшСниС: пошаговая эталонная рСализация
β€” Π—Π°Π΄Π°Π½ΠΈΠ΅: исправлСниС ошибок ΠΈ ΠΎΠΆΠΈΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
β€” РСшСниС: пошаговая эталонная рСализация
β€” ВСст ΠΏΠΎ Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚ΠΎΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Ρƒ

Π Π°Π·Π΄Π΅Π» 5. Webpack-ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹
Π Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ webpack β€” ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹.‍
β€” Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ Π½ΡƒΠΆΠ½Ρ‹
β€” НСобходимыС Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹
β€” Π”Π΅ΠΌΠΎ: Ρ€Π°Π±ΠΎΡ‚Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ сборки, минимальная кастомизация
ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°
β€” Π—Π°Π΄Π°Π½ΠΈΠ΅: настройка ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²
β€” РСшСниС: пошаговая эталонная рСализация
β€” Π—Π°Π΄Π°Π½ΠΈΠ΅: созданиС ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° многостраничного прилоТСния
β€” РСшСниС: пошаговая эталонная рСализация
β€” ВСст ΠΏΠΎ пятому Ρ€Π°Π·Π΄Π΅Π»Ρƒ

Π Π°Π·Π΄Π΅Π» 6. Π Π΅ΠΆΠΈΠΌΡ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ
Π˜Π·ΡƒΡ‡ΠΈΠΌ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ webpack β€” ΠΌΠΎΠ΄Ρ‹.‍
β€” Π Π΅ΠΆΠΈΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ
β€” Production-Ρ€Π΅ΠΆΠΈΠΌ ΠΈ браузСрная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°
β€” Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚Ρ‹
β€” Π”Π΅ΠΌΠΎ: Ρ€Π°Π±ΠΎΡ‚Π° webpack Π² зависимости ΠΎΡ‚ Ρ€Π΅ΠΆΠΈΠΌΠ°
β€ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°
β€” Π—Π°Π΄Π°Π½ΠΈΠ΅: настройка Ρ€Π΅ΠΆΠΈΠΌΠΎΠ² ΠΈ ΠΈΡ… оптимизация
β€” РСшСниС: пошаговая эталонная рСализация
‍ВСст ΠΏΠΎ ΡˆΠ΅ΡΡ‚ΠΎΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Ρƒ

Π Π°Π·Π΄Π΅Π» 7. ПодвСдСниС ΠΈΡ‚ΠΎΠ³ΠΎΠ²
Вспомним, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ, ΠΏΠΎΠ΄Π²Π΅Π΄Ρ‘ΠΌ ΠΈΡ‚ΠΎΠ³ΠΈ ΠΈ Π·Π°ΠΊΡ€Π΅ΠΏΠΈΠΌ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ знания.
β€” Вспомним основныС ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹
β€” Π”Π΅ΠΌΠΎ: ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π±ΠΎΡ‚Ρ‹ динамичСски настраиваСмой сборки ΠΏΠΎΠ΄ нСсколько страниц
β€ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°
β€” Π—Π°Π΄Π°Π½ΠΈΠ΅: сборка многостраничного прилоТСния
β€” РСшСниС: пошаговая эталонная рСализация
‍— Подводим ΠΈΡ‚ΠΎΠ³ΠΈ курса
‍— Π˜Ρ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ тСст ΠΏΠΎ курсу
favorite 0
star 0

ВрСбуСтся авторизация

account_circle

Для использования этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΎΠΉΡ‚ΠΈ Π² систСму ΠΈΠ»ΠΈ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

login Π’ΠΎΠΉΡ‚ΠΈ person_add РСгистрация

ВрСбуСтся PRO доступ

workspace_premium

Для доступа ΠΊ этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ подписку PRO ΠΈ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π»Π°ΠΉΠΊ курсу.

credit_card ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ PRO доступ

ВрСбуСтся ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π»Π°ΠΉΠΊ

favorite_border

Для доступа ΠΊ этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ этому курсу.

arrow_back Π’Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ