Webpack

• babel preset 2016-webpack will transpile the ES Modules instead of being transpiled in babel.
• By delegating the ES Modules transpilation to webpack, webpack is able to run static analysis to see which modules are being used, hence optimize the bundle with tree-shaking.
• CommonJS modules are not staticly analyzable.

• Load modules using and webpack will split that code and lazy load it.

• To optimize the browser’s cache we can fingerprint the filenames with

• CommonsChunkPlugin

• DedupPlugin - removes duplicates in npm modules.
• LoaderOptionsPlugin - toggle minification and debugging, as well as other configs.
• DefinePlugin - parses to a string, like envify
• UglifyJSPlugin - removes unused code and dev warnings. It can also discard polyfils for ie8. All of this helps to shrink the bundle size