002. WORKING WITH WEBPACK
Presenter: Binh Quan
Webpack
Webpack
❖ It can play as dev server❖ Help us create bundle for our application❖ Preprocess CSS, JS, images and more
Why use webpack
Read more: http://blog.andrewray.me/webpack-when-to-use-and-why/
Webpack
Why use webpack
❖ Dependency Graph
❖ Alias
❖ loaders
❖ Import/Export loader
❖ Plugin
❖ Code Splitting
❖ Polyfill
Webpack
What do we need to know about Webpack?
Webpack
Dependency Graph
Webpack
AliasWebpack.config.js, in ‘resolve’ section:
Using alias:
Webpack
LoadersLoaders allow you to preprocess files as you require() or “load” them
Webpack
Shimming - Import loaders
Webpack
Shimming - Export loaders
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.
Webpack
PluginWebpack plugins have the ability to inject themselves into the build process to do all sorts of crazy stuff
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
Webpack
Fetch
Common libraries:❖ node-fetch❖ whatwg-fetch❖ isomorphic-
fetch
Webpack
Polyfill
Cons
❖ The document is awful
❖ Hard for beginner
Now Demo
❖ https://github.com/geniuscarrier/webpack-boilerplate❖ https://github.com/greenglobal/es6-babel-webpack-boilerp
late
