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 Talk
Search
Richard Bray
April 07, 2018
Technology
0
37
Webpack Talk
Richard Bray
April 07, 2018
Tweet
Share
More Decks by Richard Bray
See All by Richard Bray
The benefits of Atomic CSS - London Sass Feb 2016
richardbray
4
250
Using single property classes in CSS - FEL Nov 2015
richardbray
2
630
Other Decks in Technology
See All in Technology
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
4
410
Recoil脱却の現状と挑戦
kirik
3
450
KCD Lima: eBee in Peru!
lizrice
0
110
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
410
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
540
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
150
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
740
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
1.4k
生成AIによる情報システムへのインパクト
taka_aki
1
190
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
140
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
240
AIエージェントを支える設計
tkikuchi1002
11
2k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Documentation Writing (for coders)
carmenintech
72
4.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Unsuck your backbone
ammeep
671
58k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Practical Orchestrator
shlominoach
189
11k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Site-Speed That Sticks
csswizardry
10
720
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
GitHub's CSS Performance
jonrohan
1031
460k
RailsConf 2023
tenderlove
30
1.2k
Transcript
With more complexity comes more freedom
None
None
None
What about the web?
Webpack
1. What is Webpack 2. Cool things it can do
3. How we use it at Octopus
1. What is Webpack
“Webpack is a build tool that puts all of your
assets, including Javascript, images, fonts, and CSS, in a dependency graph.” - Andy Ray
Dependency graph main.js jQuery plugins SITE main.css jQuery
Dependency graph 1 2
Dependency graph 3
Dependency graph 4
2. Cool things it can do
a. Code splitting b. Hot module replacement c. Environment Variables
a. Code splitting “This feature allows you to split your
code into various bundles which can then be loaded on demand or in parallel.”
a. Code splitting
a. Code splitting
a. Code splitting
a. Code splitting
b. Hot module replacement (HMR) “It allows all kinds of
modules to be updated at runtime without the need for a full refresh”
b. Hot module replacement (HMR) 1 2 3
b. Hot module replacement (HMR) 4
b. Hot module replacement (HMR)
c. Environment Variables “Allows you to have different behaviour between
development builds and release builds.”
c. Environment Variables 1 2
c. Environment Variables 3 4
And much more…
3. How we use it at Octopus
None
dev bundle prod bundle API Thin Client
What does that look like in code?
In Conclusion
None
None
Questions?
When and why to use Webpack https://blog.andrewray.me/webpack-when-to-use-and-why/ Require vs ES6
import/export https://stackoverflow.com/questions/31354559/using-node-js-require-vs- es6-import-export Code splitting with react and Webpack https://medium.freecodecamp.org/straightforward-code-splitting-with- react-and-webpack-4b94c28f6c3f Sources