Webpack

benefits.txt

Benefits of using Webpack:
a)  Interactive coding - instead of writing code, compiling, waiting and reloading, 
    we can use Hot Module Reload (HMR) which will only reload data that has changed.
    So if we only changed one element on our site, then only that one element will recompile (NO RELOADING!)
b)  Seamless compilation of anything - code, styles, layout, images, fonts, etc.
c)  Consistent tooling - webpack is not tied to a particular IDE and/or OS
d)  Modularity - write code with benefits of small modules, ship code in bundles
    Which means that we can have common dependencies that are going to be loaded
e)  Sophisticated bundling - bundle per page, bundle/code splitting, minify, lazy loading bundles, remove unused code
    E.g. we are a gaming company and we have three games: A, B, C
    We can bundle them as three separate bundles, 
    so when user comes along and wants to play game A, then only bundle of game A gets loaded!
f)  Caching - that can be tailored to development and production separately
g)  Customizable environments - you can easily customize builds per environment!
h)  Source Map support - debugging in web browser!

bundling.js

npm install webpack -D
npm install webpack-cli -D -y

// npx is shortcut for directly using dependencies
// -o is for specyfing output directory
// --mode is for specyfing which dependencies to use, in this case
// we use devDependencies, so mode is set to development
npx webpack ./app/app.js -o ./app/dist --mode development

polyfill.js

/*
    Polyfill is code that implements a feature on web browsers
    that don't support the feature.

    Polyfills allow web developers to use an API regardless of wehther or not
    it is supported by a browser, and usually with minimal overhead.
*/

webpack-stats-graph.js

/*
    Webpack-stats-graph lets us draw a map of dependencies 
    https://www.npmjs.com/package/webpack-stats-graph
    
    building process
    webpack --json > stats.json
    choco install graphviz
    npm install -g webpack-stats-graph
    webpack-stats-graph # by default looks for stats.json in current directory 
*/