1. What is Webpack
2. Cool things it can do
3. How we use it at Octopus
Slide 8
Slide 8 text
1. What is
Webpack
Slide 9
Slide 9 text
“Webpack is a build tool that
puts all of your assets, including
Javascript, images, fonts, and CSS, in
a dependency graph.” - Andy Ray
Slide 10
Slide 10 text
Dependency graph
main.js
jQuery
plugins
SITE
main.css
jQuery
Slide 11
Slide 11 text
Dependency graph
1
2
Slide 12
Slide 12 text
Dependency graph
3
Slide 13
Slide 13 text
Dependency graph
4
Slide 14
Slide 14 text
2. Cool things it
can do
Slide 15
Slide 15 text
a. Code splitting
b. Hot module replacement
c. Environment Variables
Slide 16
Slide 16 text
a. Code splitting
“This feature allows you to split your
code into various bundles which can
then be loaded on demand or in
parallel.”
Slide 17
Slide 17 text
a. Code splitting
Slide 18
Slide 18 text
a. Code splitting
Slide 19
Slide 19 text
a. Code splitting
Slide 20
Slide 20 text
a. Code splitting
Slide 21
Slide 21 text
b. Hot module replacement (HMR)
“It allows all kinds of modules to be
updated at runtime without the need
for a full refresh”
Slide 22
Slide 22 text
b. Hot module replacement (HMR)
1
2
3
Slide 23
Slide 23 text
b. Hot module replacement (HMR)
4
Slide 24
Slide 24 text
b. Hot module replacement (HMR)
Slide 25
Slide 25 text
c. Environment Variables
“Allows you to have different behaviour
between development builds and
release builds.”
Slide 26
Slide 26 text
c. Environment Variables
1
2
Slide 27
Slide 27 text
c. Environment Variables
3
4
Slide 28
Slide 28 text
And
much
more…
Slide 29
Slide 29 text
3. How we use it
at Octopus
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
dev
bundle
prod
bundle
API Thin Client
Slide 32
Slide 32 text
What does that
look like in code?
Slide 33
Slide 33 text
In Conclusion
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Questions?
Slide 37
Slide 37 text
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