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
25
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
220
Using single property classes in CSS - FEL Nov 2015
richardbray
2
560
Other Decks in Technology
See All in Technology
オブザーバビリティ勉強会で模擬障害対応をやってみた
leveragestech
1
360
OpenFeatureと自動生成を活用したフィーチャーフラグの宣言的集約管理
biwashi
12
1.2k
手を動かさないインシデント対応〜自動化で迅速・正確な運用を目指す〜
jacopen
3
290
週刊AWSキャッチアップ 生成AI編(2024/5/27週)
minorun365
PRO
5
150
大規模 SaaS の技術的意思決定を支える三要素 / Three elements that support technical decision-making for large-scale SaaS
_atsushisakai
0
120
情報の世界 2024年度 第10回「データとセンシングの概要」 #情報の世界 / Data and Sensing 2024
yumulab
0
170
エンドツーエンドの可視性を実現するクエスト
taijihagino
PRO
1
160
SSII2024 [OS1] 自動運転における 重要技術とトレンド紹介
ssii
PRO
0
260
DockertestとLocalStackを使って 外部サービスに依存した多要素認証の 動作確認・テストをした話 / A story about using Dockertest and LocalStack to check and test the operation of multi-factor authentication that depends on external services
kaminashi
3
240
20240617_IAM MFAのパスキー対応を理解したい_今更多要素認証とパスキーについてキャッチアップしてみた
hiashisan
0
310
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
5
1.2k
オンプレADを昇降格したらAWS上のシステムのいろんなところが通信できなくなった話
hamijay_cloud
1
280
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
28k
10 Git Anti Patterns You Should be Aware of
lemiorhan
650
58k
Designing Experiences People Love
moore
136
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
77
5k
Building Your Own Lightsaber
phodgson
101
5.8k
Documentation Writing (for coders)
carmenintech
61
4.1k
Why Our Code Smells
bkeepers
PRO
331
56k
Done Done
chrislema
178
15k
The Mythical Team-Month
searls
217
42k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
71
15k
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