Webpack presentation for Zipomat 2018

1. Webpack - BYOB (build your own bundler)
By Jozef Spišiak

2. About me
● FMFI UK - Informatics 2011
● 10 years of web development
○ Current: VacuumLabs, BA
○ Pixelant, Malmö, Sweden
○ Monogram Technologies, BA
● TYPO3 CMS, React, Wordpress,
Magento, PHP, JavaScript, HTML,
CSS, MySQL, Bash, Apache, Solr,
Nginx, Jenkins, CircleCI, Docker,
NodeJS, Reddis, Microsoft Azure,
AWS EC2

3. VacuumLabs
● 70+ developers
● 7 years in business
● Office locations
○ Bratislava
○ London
○ Košice
● Example customers:
○ Prague
○ Brno

4. Raise your hand if you
have built a website?

5. Who has written
more than 1000
lines of code in
Javascript?

6. Which of you have read
about Webpack before?

7. Let me explain
the problem we
are trying to solve

10. My first NodeJS program

11. Let’s check backend

13. Lets download few modules

14. Frontend - first problem

15. First solution:

17. Here is the culprit!

18. Alright, other ideas?
● Remove require and run:
find node_modules -name '*.js' | xargs cat >
bundle.js
Unfortunately order matters!
● Manually add them in correct order in
bundle?
grep “function render(“ node_modules -R | wc -l
15

19. We need to do it smart!
1. Read configuration
2. Build dependency tree
3. Iterate through files and modify the
import and export
4. Write bundle with local scope

20. Let’s look at the code

21. What is
Webpack?
Module bundler for web,
mostly used for Javascript
● Organize your code in many
files
● Load your website faster
● Dependency graph
● Asset processing

22. How do you use it?

23. Install, configure and run!
Just run: webpack
which writes file:
bundle.js

24. Conclusion
● Simple example
● Webpack is much more powerful
○ Bundle CSS (Sass/less)
○ Bundle images (base64)
○ Hot reload
○ Chunks
○ Minify, uglify
○ Hot reloading
○ Support of custom plugins
● Easy to start with and great for scaling and deep configuration

25. Questions?

26. Contact me
slideshare.net/JozefSpisiak
github.com/jozefspisiak/webpack-demo
jozef.spisiak@vacuumlabs.com
spiso.sk