WEBPACK + WEBASSEMBLY W E B P A C K A N D T H E C H A L L E N G E O F W E B A S S E M B L Y INTRODUCTION WEBASSEMBLY AND ESM WEBASSEMBLY? • LOW-LEVEL BINARY FORMAT FOR CODE • TYPED (I8 – I64, F32 FROM NATIVE LANGUAGES (C/C++, RUST, …) • ASSEMBLY-LIKE TEXTUAL REPRESENTATION (WAT) • WASM = WEBASSEMBLY STRUCTURE OF A WASM-FILE • MULTIPLE SECTIONS: • IMPORT • GLOBALS • FUNCTION-TYPES • CODE $getNumber_type) (result i32) (i32.const 40) ) ) WEBASSEMBLY API • 1. FETCH THE BINARY • 2. COMPILE A WebAssembly.Module • 3. INSTANCIATE A WebAssembly.Instance • AN importsObject CAN BE PASSED • 4

? ? • • STYLES.JS 10BYTES • stylesheet 9 ?? ?? ?? 14kb javascript 1.2kb runtime 20kb webassembly 100kb stylesheet 10 ? ? ? undefined is not a function ❌ • 11 ??? ? ?? “>=8.9.0 OBJECT FROM FILESYSTEM • • • 35 ??? PLUGINS: ?? ??? • • • EXTENSIBLE • OTHER SOURCE TYPES • WEBASSEMBLY, RUNTIME • STYLESHEET 36 ??? ? ?? • • • QUEUES • PLUGINS • 37 ?? ? ?? • • •

THE sideEffects FLAG • MODULE TYPES: NATIVE SUPPORT FOR: • JS (CJS/AMD/ESM) • JSON • WASM (WEBASSEMBLY MODULE) JAN 2018: ALPHA VERSION WEBPACK 4 • webpack-cli • NOW A SEPARATE MODULE • SEPARATE NEW FEATURES WITHOUT BREAKING CHANGE: • splitChunks.maxSize • /* webpackPrefetch: true */ • WEBASSEMBLY IMPROVEMENTS • DefinePlugin.runtimeValue • … • ALSO A LOT OF BUGFIXES, TESTS, LINTING, CI, ETC

COMPATIBILITY NO NODE.JS BUILT-IN MODULE POLYFILLS NEW SPECS JSON MODULES (EXPERIMENT) NEW WEBASSEMBLY MODULES EASE OF USE FOR LONG TERM CACHING DETERMINISTIC BY DEFAULT IMPROVED NAMES FOR DEBUGGING