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
640
Other Decks in Technology
See All in Technology
Goのビルドシステムの変遷 / The history of Go's build system
ymotongpoo
12
3.4k
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
110
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
910
CData MCP ナイト!「CData × Oracleで実現する新しいデータ活用 ― 国産SaaS 連携から MCP Server for Oracle Database まで」
shisyu_gaku
0
190
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
130
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
110
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.2k
5年間のFintech × Rails実践に学ぶ - 基本に忠実な運用で築く高信頼性システム / 5 Years Fintech Rails Retrospective
ohbarye
9
3.4k
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
790
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
540
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
hypermkt
0
1.8k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Optimizing for Happiness
mojombo
379
70k
For a Future-Friendly Web
brad_frost
180
9.9k
Practical Orchestrator
shlominoach
190
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
KATA
mclloyd
32
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Why Our Code Smells
bkeepers
PRO
339
57k
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