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
Webpack FTW
Search
Klemens Gordon
February 25, 2016
Technology
1
670
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
150
A loosely coupled front-end
k9ordon
2
600
How to hamburger
k9ordon
0
63
Javascript Event Emitter
k9ordon
0
77
responsive view - viennajs 2013-08
k9ordon
0
60
Other Decks in Technology
See All in Technology
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
120
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
440
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
120
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
130
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
140
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
290
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
200
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
530
Azure Well-Architected Framework入門
tomokusaba
1
350
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
8
4.1k
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
230
BI ツールはもういらない?Amazon RedShift & MCP Server で試みる新しいデータ分析アプローチ
cdataj
0
100
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
BBQ
matthewcrist
89
9.8k
Music & Morning Musume
bryan
46
6.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building an army of robots
kneath
306
46k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
A Modern Web Designer's Workflow
chriscoyier
697
190k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
A Tale of Four Properties
chriscoyier
161
23k
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?