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
Building Your Own Lightsaber
phodgson
103
6.1k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Music & Morning Musume
bryan
46
6.2k
Bash Introduction
62gerente
608
210k
Designing Experiences People Love
moore
138
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
How STYLIGHT went responsive
nonsquared
95
5.2k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Agile that works and the tools we love
rasmusluckow
327
21k
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