Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A re-introduction to webpack - DRAFT
Search
Praveen Puglia
April 05, 2018
0
58
A re-introduction to webpack - DRAFT
Praveen Puglia
April 05, 2018
Tweet
Share
More Decks by Praveen Puglia
See All by Praveen Puglia
CSS is Awesome
praveenpuglia
2
170
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Done Done
chrislema
185
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
The Language of Interfaces
destraynor
162
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Tale of Four Properties
chriscoyier
161
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Transcript
A re-introduction to webpack Praveen Puglia Draft Slides
Praveen Puglia Sainthia, West Bengal Senior Software Engineer @praveenpuglia
It all starts here https://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4
Talking about modern browsers
Good enough! <script type="text/javascript" src="app.js"></script>
Internet speeds
Maintenance is important app.js home.js login.js album.js slider.js signup.js social.js
(+=) Concatenate home.js += login.js += album.js += slider.js +=
signup.js += social.js = app.js
Which order though? 1. home.js 2. login.js 3. album.js 4.
slider.js 5. signup.js 6. social.js 3 2 1 5 6 4 1 3 5 6 4 2 1 2 4 3 6 5
If you messed it up
Humans • Many files • Comments • Debugging • Long,
descriptive names $
Computers • Anything that the hooman didn’t like
Being Human
The world of tools • JSMin • YUI Compressor •
Closure Compiler • UglifyJS • Gulp, Grunt
No Solution • Still concatenating • Human dependent dependency management
• Serving everything at once • Serving code that wasn’t required
CommonJS // add.js function add (a, b) { return a
+ b } module.exports = add // index.js const add = require('./add') console.log(add(4, 5)) //9
Things CommonJS solved • Dependency Management • Only bundle things
that are required.
Unhappy Browsers ☹
Browserify
What about us? • Images • Videos • HTML •
Objects • Templates • … … …
webpack
Import everything! require('../style.css'); require('../logo.png');
webpack’s purpose • Asset reuse • Hot Module Replacement •
Code Splitting
React endorsed webpack The only time you are gonna see
the React logo in this talk!
webpack is hard!
– John Webpacker “It’s a myth!”
To understand webpack • Entry • Output • Rules &
loaders • Plugins
Demo Time!
Webpack 4 • #0CJS, Modes, Defaults • Superfast! • CLI
upgrades • Even better modules & WASM
Thank You