Webpack Talk

Transcript

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