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
38
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
What's new in OpenShift 4.20
redhatlivestreaming
0
210
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
890
Introdução a Service Mesh usando o Istio
aeciopires
1
280
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
44k
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
110
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
140
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
100
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
9k
Dify on AWS 環境構築手順
yosse95ai
0
120
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
370
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
13
82k
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
460
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Six Lessons from altMBA
skipperchong
29
4k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
Into the Great Unknown - MozCon
thekraken
40
2.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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