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
50
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
Faster Mobile Websites
deanohume
304
30k
Gamification - CAS2011
davidbonilla
80
5k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Building Your Own Lightsaber
phodgson
102
6.1k
How GitHub (no longer) Works
holman
310
140k
Designing the Hi-DPI Web
ddemaree
280
34k
Rails Girls Zürich Keynote
gr2m
93
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
GraphQLとの向き合い方2022年版
quramy
43
13k
What's in a price? How to price your products and services
michaelherold
243
12k
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