ΠΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° Π±Π΅ΡΠ°-Π²Π΅ΡΡΠΈΡ Webpack 4
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ»ΠΈΒ Π±Π΅ΡΡ ΡΠ΅ΡΠ²Π΅ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΡΠΈΠΊΠ° JS-ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ Webpack. ΠΒ Π½Π΅ΠΉ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΠΎΠ»Π΅Π΅ Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ ΡΠ΅Π»ΠΈΠ·Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ Π²Π΅ΡΡΠΈΡΠΌΠΈ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°, Π°Β ΡΠ°ΠΊΠΆΠ΅ ΡΠ»ΡΡΡΠ΅Π½Ρ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΠΎΡΡΡ ΠΈΒ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ.
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ»ΠΈ Π±Π΅ΡΡ ΡΠ΅ΡΠ²Π΅ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΡΠΈΠΊΠ° JS-ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ Webpack. ΠΒ Π½Π΅ΠΉ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΠΎΠ»Π΅Π΅ Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ ΡΠ΅Π»ΠΈΠ·Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ Π²Π΅ΡΡΠΈΡΠΌΠΈ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°, Π°Β ΡΠ°ΠΊΠΆΠ΅ ΡΠ»ΡΡΡΠ΅Π½Ρ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΠΎΡΡΡ ΠΈΒ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π½ΠΎΠ²ΠΎΠ²Π²Π΅Π΄Π΅Π½ΠΈΡ
- Π Π°ΡΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΒ ΠΊΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΠ΅ΡΡΠΎΠ² ΡΠΆΠ°ΡΠΈΡ UglifyJS2Β Π² ΡΠ΅ΠΆΠΈΠΌΠ΅
production; - ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Node 8Β Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡΠΌΠΈ ΠΈΒ ΡΡΡΡΠΊΡΡΡΠ°ΠΌΠΈ Π΄Π°Π½Π½ΡΡ ΠΈΠ·Β ES6 ΠΈΒ ΠΏΠΎΠ»Π½ΡΠΉ ΠΎΡΠΊΠ°Π· ΠΎΡΒ NodeΒ 4;
- ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ²
entryΠΈoutputΠ²./src/ΠΈ./distΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΡΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Webpack Π±Π΅Π· ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ (#0CJS); - ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄Π²ΡΡ
ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠ΅ΠΆΠΈΠΌΠΎΠ²:
production(ΡΒ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ Π΄Π»Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ) ΠΈdevelopment(ΡΒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈΒ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΊΠΎΠ΄Π°); - ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°
sideEffects: falseΠ²package.jsonΠ΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ±ΠΎΡΠΊΠΈ. ΠΠΎΠ²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΈΠ³Π½Π°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ Webpack ΠΎΒ ΡΠΎΠΌ, ΡΡΠΎ Π²Β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ΠΎΡΡΡΡΡΡΠ²ΡΡΡ sideEffects (ΡΠ°Π½Π΅Π΅ pure-module), ΠΈΒ ΡΡΠ΅Π΄Π° ΠΌΠΎΠΆΠ΅Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎ ΡΠ΄Π°Π»ΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΡΠ΅ ΡΠΊΡΠΏΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈΠ·Β ΠΊΠΎΠ΄Π°; - ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° JSON ΠΈΒ tree shaking: Webpack Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ΄Π°Π»ΡΠ΅Ρ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΠΊΡΠΏΠΎΡΡΡ ΠΈΠ·Β JSON Module;
- ΠΠ½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠΈΠΏΠΎΠ² ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ ΠΈΒ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° .mjs Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠ±ΠΎΡΠΊΠΈ HTML/CSS. ΠΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ 5Β ΡΠΈΠΏΠΎΠ²:javascript/auto: ΠΌΠΎΠ΄ΡΠ»Ρ JavaScript ΡΠΎΒ Π²ΡΠ΅ΠΌΠΈ ΡΠΈΡΡΠ΅ΠΌΠ°ΠΌΠΈ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ (CommonJS, AMD, ESM);javascript/esm: ΠΌΠΎΠ΄ΡΠ»ΠΈ EcmaScript, Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ (ΠΏΠΎΒ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΉΠ»ΠΎΠ² .mjs);javascript/dynamic: ΡΠΎΠ»ΡΠΊΠΎ CommonJS ΠΈΒ AMD, ΠΌΠΎΠ΄ΡΠ»ΠΈ EcmaScript Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ;json: Π΄Π°Π½Π½ΡΠ΅ JSON, Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ ΠΏΠΎΒ Π·Π°ΠΏΡΠΎΡΡ ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π· ΠΈΠΌΠΏΠΎΡΡ (ΠΏΠΎΒ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΉΠ»ΠΎΠ² .json)webassembly/experimental: ΠΌΠΎΠ΄ΡΠ»ΠΈ WebAssembly (ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠΏ, ΠΏΠΎΒ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΉΠ»ΠΎΠ² .wasm);
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° WebAssembly;
- ΠΡΠΊΠ°Π· ΠΎΡΒ ΠΏΠ»Π°Π³ΠΈΠ½Π°
CommonsChunkPluginΠΈΒ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ°ΡΡΠΈ Π΅Π³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π²Β ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Webpack ΠΏΠΎΒ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅optimization.splitChunksΠΈoptimization.runtimeChunkΠ΄Π»Ρ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΠΊΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
ΠΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈΒ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π²Β ΠΆΡΡΠ½Π°Π»Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π°Β GitHub. Π‘ΡΠ°Π±ΠΈΠ»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ Webpack 4Β Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½Π° 25Β ΡΠ΅Π²ΡΠ°Π»Ρ.