Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Webpack FTW
Klemens Gordon
February 25, 2016
Technology
1
430
Webpack FTW
Code examples:
https://github.com/k9ordon/webpack-ftw
Klemens Gordon
February 25, 2016
Tweet
Share
More Decks by Klemens Gordon
See All by Klemens Gordon
Yo Building Progressive Framework-less Vanilla Web-applications
k9ordon
0
130
A loosely coupled front-end
k9ordon
2
380
How to hamburger
k9ordon
0
49
Javascript Event Emitter
k9ordon
0
60
responsive view - viennajs 2013-08
k9ordon
0
49
Other Decks in Technology
See All in Technology
モデリング、コンテキスト トランジション +1 / Data modeling
ishiayaya
0
100
Babylon.js で簡単 WebXR
yuhara0928
1
270
AWS CLI入門_20220513
suzakiyoshito
0
2.9k
1年間のポストモーテム運用とそこから生まれたツール sre-advisor / SRE NEXT 2022
fujiwara3
5
2.1k
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
2.8k
Power BI Premiumでデータ準備!
hanaseleb
1
170
Who owns the Service Level?
chaspy
5
550
Okta Identity Engineってどうよ?
tatsumin39
0
270
AWSの基礎を学ぼうで学んだ9種類のDBを勝手にふりかえる
98lerr
1
690
Micro Frontends - Entkopplung bis zur Oberfläche
naltatis
1
180
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.1k
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか? / SRE NEXT 2022
nulabinc
PRO
13
5.7k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
113
6.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Visualization
eitanlees
124
11k
The Art of Programming - Codeland 2020
erikaheidi
31
5.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Music & Morning Musume
bryan
35
4.1k
How STYLIGHT went responsive
nonsquared
85
3.9k
Transcript
SHIPPING A FRONTEND
KLEMENS GORDON Frontend Developer karriere.at likes .JS and STUFF @thisisgordon
IRL
bundling, precompiling, transforming, factor out, extract text, code splitting, commons
chunks, post-loaders, wtf, yadda yadda yadda … to send css and js files to our friend browser.
WTf
OUR FRIEND BROWSER LIKES JS AND CSS AND ASSETS AND
STUFF
“FRONT-END OPS” 1. history of shipping frontend at karriere.at 2.
webpack examples
Browser eats Programmer programms
timetravel ...
once upon a time … ~2005 v1 - ~ 1
developer - windows xp was the hottest shit - there was no iphone - cleartype was opt in - internetexplorer ...
karriere.at v1 - 2005 shipping source files
script2.js styles.css Browser script2.js styles.css Programmer script1.js script1.js
why its bad to ship js and css as sourcefiles:
(a mvp list) - performance (requests, big files) - code gets messy - ……..............................
timetravel ...
later … ~2009 v2 - more developer (2-3) - rise
of the jquery - gui is getting more complexe (autocompletes, ajax ftw, yadda) => more frontend code
None
autocomplete.js styles.css Browser autocomplete.jquery.js styles.css Programmer jquery.js page1.js page2.js autocomplete.jquery.js
styles.css page1.min.js jquery.js load me first load me on page 2 before jquery load me on page1 load me on page2 load me everywhere compress page2.min.js
- load order - dependencies - post processing
more timetraveling
v3 … ~2013 - ~ 5 devs - even more
client app stuff - responsive - amd patterns (with curljs) - grunt.js - concat all the things - less
- @unscriptable John Hann “Introducing RaveJS”
Browser page1.less Programmer page1.js page2.css page2.js autocomplete.less autocomplete.js a/_partial.js a/_partial.css
b/_partial.js bundled: amd: page2.js page2.less autocomplete.cs autocomplete.js b/_partial.js a/_partial.less a/_partial.js core.js vendor/polyfill page1.css page1.js common.css common.js
AMD DEPENDENCIES
POST PROCESS HANDCRAFTED BUNDLES ARRAY & SINGLE MODULES
GOES OUT
- module has dependencies -> load order - browser gets
small entry files - more shared code BUT - manual concat is a pain (amd fallback) - .less and .js has separate dependency trees
v4 ~2016
None
None
None
None
1. bundle 2. the css thing 3. loaders 4. code
splitting
Installation npm install webpack -g npm install webpack-dev-server -g
module-b.js 1 Simple Bundle bundle.js contains everything module-a.js requires module
b entry.js requires module a
2 the css thing entry.js bundle.js contains everything npm i
css-loader style-loader -D entry.css module-b.css module-b.js module-a.css module-a.js
3 loaders entry.es6.js bundle.js contains everything npm i babel-loader babel-core
babel-preset-es2015 -D entry.css module-b.css module-b.es6.js module-a.css module-a.es6.js hyperlink
4 code splitting entry1.js bundle1.js npm install extract-text-webpack-plugin -D module-a.js
entry2.js module-b.js bundle2.js commons.js
more stuff: - analyse - https://webpack.github. io/analyse/ - dev server
hot module replacement - https://webpack.github.io/docs/hot- module-replacement.html - production builds
one more timetraveling
~2016 HTTP2 SHIPPING SOURCE FILES LIKE ITS 2005
None
questions?