Working with Webpack

1. 002. WORKING WITH
WEBPACK

2. Webpack

3. Webpack
❖ It can play as dev server
❖ Help us create bundle for our application
❖ Preprocess CSS, JS, images and more
Why use webpack

4. Read more: http://blog.andrewray.me/webpack-when-to-use-and-why/
Webpack
Why use webpack

5. ❖ Dependency Graph
❖ Alias
❖ loaders
❖ Import/Export loader
❖ Plugin
❖ Code Splitting
❖ Polyfill
Webpack
What do we need to know about
Webpack?

6. Webpack
Dependency Graph

7. Webpack
Alias
Webpack.config.js, in ‘resolve’ section:
Using alias:

8. Webpack
Loaders
Loaders allow you to preprocess files as you require() or “load” them

9. Webpack
Shimming - Import loaders

10. Webpack
Shimming - Export loaders

11. Webpack
Shimming - Expose loaders
See more at: https://webpack.github.io/docs/shimming-modules.html
There are cases where you want a module to export itself to the global context.

12. Webpack
Plugin
Webpack plugins have the ability to inject themselves into the build process to do all
sorts of crazy stuff

13. This will remove all modules in the vendor chunk from the app chunk. The bundle.js will
now contain just your app code, without any of its dependencies. These are in
vendor.bundle.js.
Read more: https://webpack.github.io/docs/code-splitting.html
Webpack
Code Splitting

14. Webpack
Fetch
Common libraries:
❖ node-fetch
❖ whatwg-fetch
❖ isomorphic-fetch

15. Webpack
Polyfill

16. Cons
❖ The document is awful
❖ Hard for beginner

17. Now Demo
❖ https://github.com/geniuscarrier/webpack-boilerplate
❖ https://github.com/greenglobal/es6-babel-webpack-boilerplate