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