[Lectrum] ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΊΡΡΡ ΠΏΠΎ Webpack v4, Ρ ΡΠΈΡΡΠΎΠ³ΠΎ Π»ΠΈΡΡΠ° (2020)

Π ΠΊΡΡΡΠ΅
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΈ ΡΠΌΠΊΠΈΠΉ ΠΊΡΡΡ
ΠΡ ΠΈΠ·ΡΡΠΈΡΠ΅ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠ΅ΠΌΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Webpack: ΠΎΡ ΠΎΡΠ½ΠΎΠ² ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π΄ΠΎ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΡΠΈΠΏΠ° code splitting ΠΈ shimming.
Π‘ ΡΠ°ΠΌΡΡ Π°Π·ΠΎΠ²
ΠΡ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΠΌ, ΡΡΠΎ Π²Ρ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ Webpack, Π½ΠΎ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ Π΅Π³ΠΎ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π² ΠΏΡΠΎΠ΄Π°ΠΊΡΠ΅Π½Π΅ Π½Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ . ΠΠ»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ΅ skype-ΡΠΎΠ±Π΅ΡΠ΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡΠ²ΠΈΡ ΠΏΡΠΎΠ±Π΅Π»Ρ Π² Π·Π½Π°Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΈΡ Π·Π°ΠΊΡΡΡΡ.
Π ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΠΌ ΡΠ΅ΠΌΠΏΠ΅
ΠΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠΌ Π²Π°ΠΌ Π²Π΅ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» ΠΏΠΎ ΠΊΡΡΡΡ, ΡΡΠΎΠ±Ρ Π²Ρ Π² ΡΠ²ΠΎΡΠΌ ΡΠΈΡΠΌΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Webpack. ΠΠΎΡΡΡΠΏΠ½Π° Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½Π°Ρ ΠΌΠ΅Π½ΡΠΎΡΡΠΊΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π² ΡΠ°ΡΠ΅ ΠΊΡΡΡΠ°.
Π‘ ΡΠΈΠ»ΡΠ½ΠΎΠΉ ΠΌΠ΅Π½ΡΠΎΡΡΠΊΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ
ΠΠ°ΠΊΡΡΡΠΎΠ΅ ΠΊΠΎΠΌΡΡΠ½ΠΈΡΠΈ Π²ΡΠΏΡΡΠΊΠ½ΠΈΠΊΠΎΠ² Π² Slack, ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΠΌΠ΅Π½ΡΠΎΡ Π½Π° Π²ΡΠ΅ΠΌΡ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ, ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π΄ΠΎΠΌΠ°ΡΠ½ΠΈΡ Π·Π°Π΄Π°Π½ΠΈΠΉ ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π°Π½ΡΡΠΈΡ Ρ Π°Π²ΡΠΎΡΠΎΠΌ ΠΊΡΡΡΠ° β ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠΎΠ²Π½ΠΎ ΡΡΠΎΠ»ΡΠΊΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.
Π‘ΡΡΡΠΊΡΡΡΠ° ΠΊΡΡΡΠ°:
1. ΠΠ½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ webpack

Π ΠΊΡΡΡΠ΅
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΈ ΡΠΌΠΊΠΈΠΉ ΠΊΡΡΡ
ΠΡ ΠΈΠ·ΡΡΠΈΡΠ΅ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠ΅ΠΌΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Webpack: ΠΎΡ ΠΎΡΠ½ΠΎΠ² ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π΄ΠΎ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΡΠΈΠΏΠ° code splitting ΠΈ shimming.
Π‘ ΡΠ°ΠΌΡΡ Π°Π·ΠΎΠ²
ΠΡ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΠΌ, ΡΡΠΎ Π²Ρ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ Webpack, Π½ΠΎ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ Π΅Π³ΠΎ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π² ΠΏΡΠΎΠ΄Π°ΠΊΡΠ΅Π½Π΅ Π½Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ . ΠΠ»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ΅ skype-ΡΠΎΠ±Π΅ΡΠ΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡΠ²ΠΈΡ ΠΏΡΠΎΠ±Π΅Π»Ρ Π² Π·Π½Π°Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΈΡ Π·Π°ΠΊΡΡΡΡ.
Π ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΠΌ ΡΠ΅ΠΌΠΏΠ΅
ΠΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠΌ Π²Π°ΠΌ Π²Π΅ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» ΠΏΠΎ ΠΊΡΡΡΡ, ΡΡΠΎΠ±Ρ Π²Ρ Π² ΡΠ²ΠΎΡΠΌ ΡΠΈΡΠΌΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Webpack. ΠΠΎΡΡΡΠΏΠ½Π° Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½Π°Ρ ΠΌΠ΅Π½ΡΠΎΡΡΠΊΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π² ΡΠ°ΡΠ΅ ΠΊΡΡΡΠ°.
Π‘ ΡΠΈΠ»ΡΠ½ΠΎΠΉ ΠΌΠ΅Π½ΡΠΎΡΡΠΊΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ
ΠΠ°ΠΊΡΡΡΠΎΠ΅ ΠΊΠΎΠΌΡΡΠ½ΠΈΡΠΈ Π²ΡΠΏΡΡΠΊΠ½ΠΈΠΊΠΎΠ² Π² Slack, ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΠΌΠ΅Π½ΡΠΎΡ Π½Π° Π²ΡΠ΅ΠΌΡ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ, ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π΄ΠΎΠΌΠ°ΡΠ½ΠΈΡ Π·Π°Π΄Π°Π½ΠΈΠΉ ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π°Π½ΡΡΠΈΡ Ρ Π°Π²ΡΠΎΡΠΎΠΌ ΠΊΡΡΡΠ° β ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠΎΠ²Π½ΠΎ ΡΡΠΎΠ»ΡΠΊΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.
Π‘ΡΡΡΠΊΡΡΡΠ° ΠΊΡΡΡΠ°:
1. ΠΠ½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ webpack
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ webpack?
- Bundler vs task runner
- ΠΡΠ»ΠΈΡΠΈΡ webpack ΠΎΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΈΜ
- Dependency graph
- Π‘Π°ΠΌΡΠΈΜ ΠΏΡΠΎΡΡΠΎΠΈΜ Π·Π°ΠΏΡΡΠΊ webpack: config-free, CLI
- Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠ°ΠΌΠΎΠΈΜ ΠΏΡΠΎΡΡΠΎΠΈΜ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ webpack
- Π’ΠΈΠΏΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈΜ: ΠΠ±ΡΠ΅ΠΊΡ, Π€ΡΠ½ΠΊΡΠΈΡ, ΠΡΠΎΠΌΠΈΡ
- ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ HTML
- ΠΠ°ΠΏΡΡΠΊ webpack ΡΠ΅ΡΠ΅Π· Node API
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Loader
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Plugin
- ΠΠ°ΡΡΡΠΎΠΈΜΠΊΠ° ΡΠ΅ΡΠ²Π΅ΡΠ° Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
- webpack-dev-server
- webpack-dev-middleware
- Hot module replacement
- Π‘Π±ΠΎΡΠΊΠ° JavaScript
- Π§ΠΈΡΡΡΠΈΜ JavaScript
- Π’ΡΠ°Π½ΡΠΏΠ°ΠΈΜΠ»ΠΈΠ½Π³
- Π‘Π±ΠΎΡΠΊΠ° React
- ΠΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ: ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈΜ Π½Π° development ΠΈ production
- Π‘Π±ΠΎΡΠΊΠ° CSS
- CSS Modules
- ΠΠ°Π³ΡΡΠ·ΠΊΠ° PostCSS
- Π£Π»ΡΡΡΠ΅Π½Π½Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ
- ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π½Π° ESM
- ΠΡΠ½Π΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΠ΅ΠΈΜ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π² ΠΌΠΎΠ΄ΡΠ»ΠΈ
- Source maps
- ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈΜ
- ΠΠ°Π³ΡΡΠ·ΠΊΠ° Π»ΠΎΠ΄Π΅ΡΠΎΠΌ
- ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ½Π»Π°ΠΈΜΠ½
- ΠΠ°Π³ΡΡΠ·ΠΊΠ° SVG: React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, Π°ΡΡΠΈΠ±ΡΡ src, CSS
- ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΡΡΠΈΡΡΠΎΠ²
- ΠΠ°Π³ΡΡΠ·ΠΊΠ° Π»ΠΎΠ΄Π΅ΡΠΎΠΌ
- ΠΠ°Π³ΡΡΠ·ΠΊΠ° Google-ΡΡΠΈΡΡΠΎΠ²
- Π Π°Π·Π±ΠΎΡ webpack runtime
- ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ ΠΈ feature flags
- ΠΠ½Π°Π»ΠΈΠ· ΡΠ±ΠΎΡΠΊΠΈ
- ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠ΅ΠΆΠΈΠΌΠΎΠ² ΡΠ±ΠΎΡΠΊΠΈ: development, production
- JavaScript
- ΠΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΡ
- Tree shaking
- Scope hoisting
- Dead code elimination
- CSS
- ΠΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ CSS ΠΎΡ ΡΠ±ΠΎΡΠΊΠΈ
- autoprefixer
- ΠΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΡ
- ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈΜ
- ΠΠ΅ΠΏΠ»ΠΎΠΈΜΠΌΠ΅Π½Ρ ΡΠ±ΠΎΡΠΊΠΈ
- Long term caching
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ°Π½ΠΊ, ΠΌΠΎΠ΄ΡΠ»Ρ, Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ
- Code splitting
- Bundle Splitting
- Manifest management
- Polyfilling
- gzip-ΠΊΠΎΠΌΠΏΡΠ΅ΡΡΠΈΡ ΡΠ±ΠΎΡΠΊΠΈ
- ΠΠ°ΡΡΡΠΎΠΈΜΠΊΠ° publicPath
- ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΠ°Ρ ΠΎΡΠ»Π°Π΄ΠΊΠ° ΡΠ±ΠΎΡΠΊΠΈ
- ΠΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ code splitting ΠΈ ΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅
- Code splitting React-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
- Shimming
- ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ΅ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ±ΠΎΡΠΊΠΎΠΉ
Π‘ΠΊΡΡΡΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΠΎΠΉΡΠΈ ΠΈΠ»ΠΈ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.
Π‘ΠΠΠ§ΠΠ’Π¬Π‘ΠΊΡΡΡΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΠΎΠΉΡΠΈ ΠΈΠ»ΠΈ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: