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
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
460
Wasmのエコシステムを使った ツール作成方法
askua
0
120
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
290
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
280
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
380
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.4k
from Sakichi Toyoda to Agile
kawaguti
PRO
1
110
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
1
280
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Scaling GitHub
holman
463
140k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
GraphQLとの向き合い方2022年版
quramy
49
14k
Why Our Code Smells
bkeepers
PRO
339
57k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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