Slide 1

Slide 1 text

WEBPACK 4: THE FIRE PROSPER OTEMUYIWA | CODEFEST NOVOSIBIRSK, RUSSIA 2018 LIGHTING

Slide 2

Slide 2 text

You mean I’m going to speak Russian? ..still learning to construct the Russian AST.

Slide 3

Slide 3 text

VIBRANIUM OPEN SOURCERER @unicodeveloper

Slide 4

Slide 4 text

GOOGLE DEVELOPER EXPERT @unicodeveloper

Slide 5

Slide 5 text

DEVELOPER ADVOCATE | COMMUNITY BUILDER forLoop Africa Laravel Nigeria Angular Nigeria Webpack Africa

Slide 6

Slide 6 text

webpack 4: LEGATO FIRST MAJOR RELEASE WITH A CODENAME CODENAME

Slide 7

Slide 7 text

“The pain that you’ve been feeling can’t compare to the joy webpack 4 brings, @unicodeveloper is lighting the fire #codefestRussia2018” #TweetQuote

Slide 8

Slide 8 text

FASTER BUILD TIMES BY DEFAULT! Up to 98% faster than previous versions.

Slide 9

Slide 9 text

webpack 3 2405ms webpack 4 1388ms

Slide 10

Slide 10 text

ZERO CONFIG #0CJS BUNDLER! ⚓ ...to enhance the developer experience.

Slide 11

Slide 11 text

#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.

Slide 12

Slide 12 text

#0CJS BUNDLER ⚓ Just Webpack away!

Slide 13

Slide 13 text

#0CJS BUNDLER ⚓ Throws an error if ./src directory doesn’t exist.

Slide 14

Slide 14 text

BETTER DEFAULTS MODE OPTIONS PRODUCTION DEVELOPMENT

Slide 15

Slide 15 text

BETTER DEFAULTS MODE OPTION webpack.config.js

Slide 16

Slide 16 text

BETTER DEFAULTS MODE OPTION - SCRIPTS webpack.config.js

Slide 17

Slide 17 text

BETTER DEFAULTS MODE OPTION - DEVELOPMENT - Better runtime error messages - Fast incremental compilation - Better tooling for in-browser debugging

Slide 18

Slide 18 text

BETTER DEFAULTS MODE OPTION - PRODUCTION - Small output size - Fast code at runtime - Easy to use output assets - Omitting development-only code

Slide 19

Slide 19 text

ACCOMMODATING MORE MODULE TYPES .wasm, .mjs, .js, .json

Slide 20

Slide 20 text

“ Webpack 4 - the Airbnb of module types for optimal web performance” - @unicodeveloper

Slide 21

Slide 21 text

MODULE TYPES - WEB ASSEMBLY OUT OF THE BOX - webassembly/experimental - import webassembly modules into your js apps to make it fast!

Slide 22

Slide 22 text

MODULE TYPES - WEB ASSEMBLY MAGIC

Slide 23

Slide 23 text

DLLS IN THE BROWSER? C# & WEBASSEMBLY? NOT POSSIBLE!!!

Slide 24

Slide 24 text

DLLS IN THE BROWSER? C# & WEBASSEMBLY? WITH WEBPACK, IT IS POSSIBLE!!! ✅

Slide 25

Slide 25 text

DLLS IN THE BROWSER? WEBPACK & BLAZOR https://blazor-demo.github.io PLAY WITH THE DEMO

Slide 26

Slide 26 text

MODULE TYPES - JSON TREE SHAKING import { succeed } from ‘./details.json’; REMOVE UNUSED CODE. DEAD CODE ELIMINATION

Slide 27

Slide 27 text

MODULE TYPES - JSON TREE SHAKING import { succeed } from ‘./details.json’;

Slide 28

Slide 28 text

OVERHAULED PLUGIN SYSTEM. FRESH! ❖ Monomorphic Hooks ❖ Lazy Compiling ❖ Easy Upgrade to New API

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

FAREWELL CommonsChunkPlugin

Slide 31

Slide 31 text

HELLO SplitChunksPlugin optimization.splitChunks optimization.runtimeChunk OUT OF THE BOX

Slide 32

Slide 32 text

PLUGIN PROFILING Webpack Plugin Profiling on Google Chrome

Slide 33

Slide 33 text

PLUGIN PROFILING IDENTIFY WHAT PLUGINS ARE TAKING UP YOUR CPU TIME

Slide 34

Slide 34 text

PLUGIN PROFILING Thanks to @samccone

Slide 35

Slide 35 text

Upgrade to webpack 4 https://github.com/webpack/webpack.js. org/issues/1706 https://medium.com/webpack

Slide 36

Slide 36 text

Upgrade to webpack 4 The React Team is close to major upgrade.

Slide 37

Slide 37 text

ROAD TO webpack 5

Slide 38

Slide 38 text

CSS, HTML, FILE as module types CSS Code Splitting Multicore/ Multithreaded Builds WEBPACK 5? ⛷

Slide 39

Slide 39 text

WASM support to become stable Module disk cache between build processes CSS as a first class citizen WEBPACK 5? ⛷

Slide 40

Slide 40 text

THANKS, ANY QUESTIONS? I’M EVERYWHERE GITHUB MEDIUM TWITTER @unicodeveloper CODEPEN