webpack 4: Lighting the fire

webpack 4: LIGHTING THE FIRE - CODEFEST, RUSSIA 2018

Transcript

1. WEBPACK 4: THE FIRE PROSPER OTEMUYIWA | CODEFEST NOVOSIBIRSK, RUSSIA 2018 LIGHTING
2. You mean I’m going to speak Russian? ..still learning to construct the Russian AST.
3. VIBRANIUM OPEN SOURCERER @unicodeveloper
4. GOOGLE DEVELOPER EXPERT @unicodeveloper
5. DEVELOPER ADVOCATE | COMMUNITY BUILDER forLoop Africa Laravel Nigeria Angular Nigeria Webpack Africa
6. webpack 4: LEGATO FIRST MAJOR RELEASE WITH A CODENAME CODENAME
7. “The pain that you’ve been feeling can’t compare to the joy webpack 4 brings, @unicodeveloper is lighting the fire #codefestRussia2018” #TweetQuote
8. FASTER BUILD TIMES BY DEFAULT! Up to 98% faster than previous versions.
9. webpack 3 2405ms webpack 4 1388ms
10. ZERO CONFIG #0CJS BUNDLER! ⚓ ...to enhance the developer experience.
11. #0CJS BUNDLER ⚓ 1. No need to define an entry point. 2. No need to define an output. 3. In fact, no need for a config file. Takes src/index.js file as the default entry point. Emits the bundle to dist/main.js file by default.
12. #0CJS BUNDLER ⚓ Just Webpack away!
13. #0CJS BUNDLER ⚓ Throws an error if ./src directory doesn’t exist.
14. BETTER DEFAULTS MODE OPTIONS PRODUCTION DEVELOPMENT
15. BETTER DEFAULTS MODE OPTION webpack.config.js
16. BETTER DEFAULTS MODE OPTION - SCRIPTS webpack.config.js
17. BETTER DEFAULTS MODE OPTION - DEVELOPMENT - Better runtime error messages - Fast incremental compilation - Better tooling for in-browser debugging
18. BETTER DEFAULTS MODE OPTION - PRODUCTION - Small output size - Fast code at runtime - Easy to use output assets - Omitting development-only code
19. ACCOMMODATING MORE MODULE TYPES .wasm, .mjs, .js, .json
20. “ Webpack 4 - the Airbnb of module types for optimal web performance” - @unicodeveloper
21. MODULE TYPES - WEB ASSEMBLY OUT OF THE BOX - webassembly/experimental - import webassembly modules into your js apps to make it fast!
22. MODULE TYPES - WEB ASSEMBLY MAGIC
23. DLLS IN THE BROWSER? C# & WEBASSEMBLY? NOT POSSIBLE!!!
24. DLLS IN THE BROWSER? C# & WEBASSEMBLY? WITH WEBPACK, IT IS POSSIBLE!!! ✅
25. DLLS IN THE BROWSER? WEBPACK & BLAZOR https://blazor-demo.github.io PLAY WITH THE DEMO
26. MODULE TYPES - JSON TREE SHAKING import { succeed } from ‘./details.json’; REMOVE UNUSED CODE. DEAD CODE ELIMINATION
27. MODULE TYPES - JSON TREE SHAKING import { succeed } from ‘./details.json’;
28. OVERHAULED PLUGIN SYSTEM. FRESH! ❖ Monomorphic Hooks ❖ Lazy Compiling ❖ Easy Upgrade to New API
29. NEW PLUGIN SYSTEM ❖ Must provide a name when adding plugins. ❖ Register hooks by creating a new Hook object as property of the hooks object. ❖ The hooks object houses all hooks as property of the extensible class.
30. FAREWELL CommonsChunkPlugin
31. HELLO SplitChunksPlugin optimization.splitChunks optimization.runtimeChunk OUT OF THE BOX
32. PLUGIN PROFILING Webpack Plugin Profiling on Google Chrome
33. PLUGIN PROFILING IDENTIFY WHAT PLUGINS ARE TAKING UP YOUR CPU TIME
34. PLUGIN PROFILING Thanks to @samccone
35. Upgrade to webpack 4 https://github.com/webpack/webpack.js. org/issues/1706 https://medium.com/webpack
36. Upgrade to webpack 4 The React Team is close to major upgrade.
37. ROAD TO webpack 5
38. CSS, HTML, FILE as module types CSS Code Splitting Multicore/ Multithreaded Builds WEBPACK 5? ⛷
39. WASM support to become stable Module disk cache between build processes CSS as a first class citizen WEBPACK 5? ⛷
40. THANKS, ANY QUESTIONS? I’M EVERYWHERE GITHUB MEDIUM TWITTER @unicodeveloper CODEPEN