Webpack Fundamentals

Beatriz Silveira

Transcript

1. Webpack Fundamentals
2. Origins
3. JS it's just scripts
4. Inline Script
5. Problems • Doesn't Scale • Too many Scripts • Performance Problems • Unmaintainable Scripts • Scope • Size • Readability • Fragility
6. IIFE's - Immediately Invoked Function Expression
7. IIFE's • Full rebuilds every time • Lots of IIFE's are slow
8. How to import JS on Backend? COMMON JS
9. CommonJS -> NodeJS
10. JavaScript Modules CommonJS
11. JavaScript Modules Was too popular, but how to use this on Browser Commonjs is synchronous !!! No browser support !!! CommonJS
12. AMD To transfer module syntax from server usage to browser usage, CommonJS proposed AMD - Asynchronous Module Definition
13. AMD But, How can I use it ?
14. RequireJS • Is a JavaScript module loader. • It helps load modules asynchronously as needed • You can write AMD style module
15. RequireJS
16. Browserify • With Browserify, you can use CommonJS module in browser application • Traverse the dependency tree of your codes and bundle them up in a single file
17. Browserify
18. ES6 Module Syntax • Browsers are not ready for this new syntax. • There are tools available. These tools allow us to use ES6 module syntax today.
19. Webpack • Webpack is a module bundler. • If it is the same as Browserify, why would we need yet another module bundler? • Webpack can handle CommonJS, AMD and ES6 modules.
20. The Core Concepts • Entry • Output • Loaders • Plugins
21. Entry Default ./src/index.js webpack.config.js
22. Output Default ./dist/main.js
23. Loaders & Rules test A regular expression that instructs the compiler which files to run the loader against. use An array/string/function that returns loader objects.
24. Chaining Loaders less-loader css-loader style-loader style.less style.css *.js Inline style
25. Plugins Allow you to hook into the entire compilation lifecycle Add new instance of plugin to plugins key in config object
26. Using during development 1. Webpack's watch mode 2. webpack-dev-server
27. Webpack's Watch Mode npm run watch
28. webpack -dev-server webpack.config.js
29. webpack -dev-server package.json
30. Tree Shaking Dead-code elimination
31. Tree Shaking
32. Tree Shaking
33. Production Goal - Improve load time 1. Minified bundles 2. Lighter weight source maps 3. Optimized assets It's recommend writing separate webpack configurations for each environment