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
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Designing for humans not robots
tammielis
254
26k
The Invisible Side of Design
smashingmag
301
51k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Scaling GitHub
holman
463
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
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