002. Working with Webpack

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