πŸ‘¨πŸ»β€πŸ’» АдминистрированиС ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ πŸ‘¨πŸ»β€πŸ’» - [Lectrum] ΠŸΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ курс ΠΏΠΎ Webpack v4, с чистого листа (2020) | Π‘Π»ΠΈΠ² ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ… курсов ΠΈ Ρ‚Ρ€Π΅Π½ΠΈΠ½Π³ΠΎΠ² Π½Π° SLIV.ONE Π•Π–Π•Π”ΠΠ•Π’ΠΠž! Π­ΠΊΡΠΊΠ»ΡŽΠ·ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»! Π‘Ρ…Π΅ΠΌΡ‹ Π·Π°Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°! БСсплатныС Онлайн ΠšΡƒΡ€ΡΡ‹!

πŸ‘¨πŸ»β€πŸ’» АдминистрированиС ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ πŸ‘¨πŸ»β€πŸ’» [Lectrum] ΠŸΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ курс ΠΏΠΎ Webpack v4, с чистого листа (2020)

PO$EIDON

⚑️ #moder_PROFI ⚑️
Команда Ρ„ΠΎΡ€ΡƒΠΌΠ°
[Lectrum] ΠŸΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ курс ΠΏΠΎ Webpack v4, с чистого листа (2020)
0d906e39d7e1dd08811466a316425375.png
О курсС

ΠŸΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ ΠΈ Ρ‘ΠΌΠΊΠΈΠΉ курс
Π’Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ относятся ΠΊ Webpack: ΠΎΡ‚ основ эффСктивной сборки ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π΄ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² Ρ‚ΠΈΠΏΠ° code splitting ΠΈ shimming.

Π‘ самых Π°Π·ΠΎΠ²
ΠœΡ‹ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с Webpack, Π½ΠΎ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π² ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ΅Π½Π΅ Π½Π° соврСмСнных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…. Для облСгчСния обучСния доступно тСхничСскоС skype-собСсСдованиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ выявит ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ Π² знаниях ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡ… Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ.

Π’ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎΠΌ Ρ‚Π΅ΠΌΠΏΠ΅
ΠœΡ‹ прСдоставим Π²Π°ΠΌ вСсь ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» ΠΏΠΎ курсу, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Π² своём Ρ€ΠΈΡ‚ΠΌΠ΅ занимались ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ΠΌ Webpack. Доступна СТСднСвная мСнторская ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π² Ρ‡Π°Ρ‚Π΅ курса.

Π‘ сильной мСнторской ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ
Π—Π°ΠΊΡ€Ρ‹Ρ‚ΠΎΠ΅ ΠΊΠΎΠΌΡŒΡŽΠ½ΠΈΡ‚ΠΈ выпускников Π² Slack, ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ΅Π½Ρ‚ΠΎΡ€ Π½Π° врСмя обучСния, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° Π΄ΠΎΠΌΠ°ΡˆΠ½ΠΈΡ… Π·Π°Π΄Π°Π½ΠΈΠΉ ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ занятия с Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ курса β€” ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Ρ€ΠΎΠ²Π½ΠΎ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, сколько Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° курса:

1. Знакомство с webpack
  1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ webpack?
  2. Bundler vs task runner
  3. ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ webpack ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈΜ†
  4. Dependency graph
  5. Π‘Π°ΠΌΡ‹ΠΈΜ† простой запуск webpack: config-free, CLI
  6. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° самой простой ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ webpack
  7. Π’ΠΈΠΏΡ‹ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈΜ†: ΠžΠ±ΡŠΠ΅ΠΊΡ‚, Ѐункция, ΠŸΡ€ΠΎΠΌΠΈΡ
  8. ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ HTML
2. ΠžΡΠ½ΠΎΠ²Ρ‹ webpack
  1. Запуск webpack Ρ‡Π΅Ρ€Π΅Π· Node API
  2. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Loader
  3. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Plugin
  4. Настройка сСрвСра для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ
  5. webpack-dev-server
  6. webpack-dev-middleware
  7. Hot module replacement
3. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΊΠΎΠ΄Π°
  1. Π‘Π±ΠΎΡ€ΠΊΠ° JavaScript
  2. Чистый JavaScript
  3. Вранспайлинг
  4. Π‘Π±ΠΎΡ€ΠΊΠ° React
  5. ΠšΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ: Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈΜ† Π½Π° development ΠΈ production
  6. Π‘Π±ΠΎΡ€ΠΊΠ° CSS
  7. CSS Modules
  8. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° PostCSS
4. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ассСтов
  1. Π£Π»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ композиция ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ
  2. ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Π½Π° ESM
  3. ВынСсСниС частСй ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Π² ΠΌΠΎΠ΄ΡƒΠ»ΠΈ
  4. Source maps
  5. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈΜ†
  6. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π»ΠΎΠ΄Π΅Ρ€ΠΎΠΌ
  7. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΠ½Π»Π°ΠΈΜ†Π½
  8. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° SVG: React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src, CSS
  9. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²
  10. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π»ΠΎΠ΄Π΅Ρ€ΠΎΠΌ
  11. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Google-ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²
5. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ сборки
  1. Π Π°Π·Π±ΠΎΡ€ webpack runtime
  2. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ окруТСния ΠΈ feature flags
  3. Анализ сборки
  4. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ Ρ€Π΅ΠΆΠΈΠΌΠΎΠ² сборки: development, production
  5. JavaScript
  6. ΠœΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ
  7. Tree shaking
  8. Scope hoisting
  9. Dead code elimination
6. ΠŸΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Π°Ρ оптимизация
  1. CSS
  2. ΠžΡ‚Π΄Π΅Π»Π΅Π½ΠΈΠ΅ CSS ΠΎΡ‚ сборки
  3. autoprefixer
  4. ΠœΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ
  5. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈΜ†
  6. Π”Π΅ΠΏΠ»ΠΎΠΈΜ†ΠΌΠ΅Π½Ρ‚ сборки
  7. Long term caching
7. Π’ Π΄ΠΎΠ»Π³ΠΎΠ΅ ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅
  1. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ‡Π°Π½ΠΊ, ΠΌΠΎΠ΄ΡƒΠ»ΡŒ, Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ
  2. Code splitting
  3. Bundle Splitting
  4. Manifest management
  5. Polyfilling
  6. gzip-компрСссия сборки
  7. Настройка publicPath
  8. ΠŸΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Π°Ρ ΠΎΡ‚Π»Π°Π΄ΠΊΠ° сборки
8. КопаСм Π΅Ρ‰Ρ‘ Π³Π»ΡƒΠ±ΠΆΠ΅
  1. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, связанныС с code splitting ΠΈ ΠΈΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅
  2. Code splitting React-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
  3. Shimming
  4. Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½ΠΎΠ΅ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ сборкой
ΠŸΠ ΠžΠ”ΠΠ–ΠΠ˜Πš
Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎΠ΅ содСрТимоС. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²ΠΎΠΉΡ‚ΠΈ ΠΈΠ»ΠΈ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.
БКАЧАВЬ

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎΠ΅ содСрТимоС. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²ΠΎΠΉΡ‚ΠΈ ΠΈΠ»ΠΈ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.
 
ПослСднСС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅:
Π‘Π²Π΅Ρ€Ρ…Ρƒ