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
57
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
Documentation Writing (for coders)
carmenintech
72
4.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
How GitHub (no longer) Works
holman
314
140k
Designing for humans not robots
tammielis
253
25k
Scaling GitHub
holman
460
140k
Fireside Chat
paigeccino
37
3.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Statistics for Hackers
jakevdp
799
220k
A Tale of Four Properties
chriscoyier
160
23k
Being A Developer After 40
akosma
90
590k
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